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 26

Appendices

A B C D E F

Index

These Web pages contain all the examples from the book HTML for the World Wide Web: Visual QuickStart Guide, Fifth Edition with XHTML and CSS 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 57 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 and CGI 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). I've stuffed the three huge multimedia files in a separate file. If you need help unzipping either file, check out StuffIt (again, for both Macs and Windows), or your favorite decompression program. This page you are reading is also included, and as you can see below, it contains a helpful table that explains which files go with which pages/sections. Note that these are new Zip files that do not require StuffIt, which while free was still a bit of a nuisance if you already had WinZip or some other unzipping utility.

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

Hope you find them helpful!

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

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

Copyright 1998-2002 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. 26)blueflax.html with blueflax.css
A Web Page’s Text Content (p. 30)blueflax.html with blueflax.css
Links, Images, and Other Non-Text Content (p. 31)blueflax.html with blueflax.css
HTML vs XHTML (p. 36)blueflax.html with blueflax.css
blueflax_html.html with blueflax.css
Versions, flavors, and DOCTYPE (p. 38)Common Doctypes
blueflax_quirky_nodoc.html with blueflax_quirky.css
blueflax_quirky_yesdoc.html with blueflax_quirky.css
blueflax.html with blueflax.css
The Default Display of (X)HTML (p. 40)blueflax_nocss.html
Adding Style to Your Web Pages (p. 41)blueflax.html with blueflax.css
The Cascade: When Rules Collide (p. 42)blueflax.html with blueflax.css
specificity.html with specificity.css
A Property’s Value (p. 44)Sixteen Predefined Colors

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. 57)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 (p. 60)doctype.html
Common Doctypes
Creating the Foundation (p. 62)headbody.html
Declaring the Encoding (p. 63)charset.html
Creating a Title (p. 64)title.html
Creating Section Headers (p. 65)headers.html
Starting a New Paragraph (p. 66)paragraphs.html
Breaking up a Page into Divisions (p. 68)div.html
styles.html with gaudistyles.css
Creating Inline Spans (p. 69)span.html
styles.html with gaudistyles.css
Creating a Line Break (p. 70)br.html
Adding Comments (p. 71)comments.html
Labeling Elements in a Web Page (p. 72)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. 74)bolditalic.html
strongem.html
Changing the Size of Text (p. 75)bigsmall.html
Using a Monospaced Font (p. 76)code.html
Using Preformatted Text (p. 77)precode_chunk.html
precode.html
Quoting Text (p. 78)blockquote.html
q.html
q_fr.html
Creating Superscripts and Subscripts (p. 80)subsup.html
subsup_size.html with subsup.css
Marking Changed Text (p. 81)insdel.html
Explaining Abbreviations (p. 82)abbr_acronym.html

5: Creating Web Images

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

About Images for the Web (p. 84)dithersafe.html
arcadia_big.html
arcadia_small.html
Saving Images with Transparency (p. 94)transpig.html
Simulating Transparency (p. 95)faket.html
Creating Animated GIFs (p. 101)animatedgif.html

6: Using Images

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

Inserting Images on a Page (p. 104)image.html
Offering Alternate Text (p. 105)alt.html
Specifying Size for Speedier Viewing (p. 106)sizing.html
Scaling an Image (p. 108)scale_bef.html
scale_aft.html
Linking Thumbnails to Images (p. 109)icons.html
Making Images Float (p. 110)floatright.html
floatleft.html
floatboth.html
Stopping Elements from Wrapping (p. 112)clearleft.html
clearall.html
Adding Space around an Image (p. 113)space.html
space_aft.html
Aligning Images (p. 114)align.html
Adding Horizontal Rules (p. 115)hr.html

7: 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 (p. 118)simplelink.html
externallink.html
Creating Anchors (p. 120)anchor.html
Linking to a Specific Anchor (p. 121)anchor.html
Targeting Links to Specific Windows (p. 122)target.html
Setting the Default Target (p. 123)targetbase.html
Creating Other Kinds of Links (p. 124)links_other.html
Creating Keyboard Shortcuts for Links (p. 126)keyboard.html
Setting the Tab Order for Links (p. 127)tabindex.html
Using Images to Label Links (p. 128)buttonlink.html
Creating a Client-Side Image Map (p. 130)map.html
Using a Server-Side Image Map (p. 132)clickimage.html

8: Creating Styles

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

Selecting Elements by Name (p. 136)name.html with name.css
Selecting Elements by Class or ID (p. 137)classid.html with classid.css
Selecting Elements by Context (p. 138)descendant.html with descendant.css
child.html with child.css
firstchild.html with firstchild.css
adjsibling.html with adjsibling.css
Selecting Link Elements Based on Their State (p. 141)state.html with state.css
Selecting Part of an Element (p. 142)firstline.html with firstline.css
firstletter.html with firstletter.css
Selecting Elements Based on Attributes (p. 144)attribute.html with attribute.css
Specifying Groups of Elements (p. 145)group.html with group.css

9: Applying Styles

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

Linking External Style Sheets (p. 149)link.html with base.css
link2.html with base.css
Offering Alternate Style Sheets (p. 150)choices.html with base.css with preferred.css with alternate.css
Creating an Internal Style Sheet (p. 151)internal.html
Importing External Style Sheets (p. 152)link.html with base.css
import.html with not_for_Netscape4.css
Applying Styles Locally (p. 153)local.html
The Importance of Location (p. 154)conflict.html with base.css
conflict2_linklast.html with base.css
Adding Comments to Style Rules (p. 155)link_comments.html with base_comments.css
link_comments2.html with base_comments2.css

10: Formatting with Styles

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

Choosing a Font Family (p. 158)fontfamily.html with fontfamily.css
Embedding Fonts on a Page (p. 159)embed.html with embed.css
Creating Italics (p. 160)italic.html with italic.css
Applying Bold Formatting (p. 161)bold.html with bold.css
Setting the Font Size (p. 162)fontsize.html with fontsize.css
fontsize_relative.html with fontsize_relative.css
Setting the Line Height (p. 164)lineheight.html with lineheight.css
Setting All Font Values at Once (p. 165)font.html with font.css
Setting the Text Color (p. 166)color.html with color.css
Changing the Text’s Background (p. 167)background.html with background.css
Controlling Spacing (p. 168)spacing.html with spacing.css
Adding Indents (p. 169)indent.html with indent.css
Setting White Space Properties (p. 170)whitespace.html with whitespace.css
Aligning Text (p. 171)textalign.html with textalign.css
Changing the Text Case (p. 172)texttransform.html with texttransform.css
Using Small Caps (p. 173)fontvariant.html with fontvariant.css
Decorating Text (p. 174)decoration.html with decoration.css

11: Layout with Styles

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

Layout with Styles (p. 175)valign.html with valign.css
Structuring Your Pages (p. 176)nolayoutcss.html with text.css
Displaying and Hiding Elements (p. 178)display.html with display.css
Positioning Elements Absolutely (p. 179)absolute.html with absolute.css
Affixing an Element to the Browser Window (p. 180)fixed.html with fixed.css
Offsetting Elements In the Natural Flow (p. 181)relative.html with relative.css
Changing the Background (p. 182)background.html with background.css
background_image.html with background_image.css
Changing the Foreground Color (p. 184)color.html with color.css
Changing the Cursor (p. 185)cursor.html with cursor.css
Setting the Border (p. 186)border.html with border.css
borderstyles.html with borderstyles.css
Adding Padding around an Element (p. 188)padding.html with padding.css
Setting the Margins around an Element (p. 189)margin.html with margin.css
Setting the Height or Width for an Element (p. 190)width.html with width.css
widthtest.html
auto.html
Positioning Elements in 3D (p. 192)z-index.html with z-index.css
Determining Where Overflow Should Go (p. 193)overflow_bef.html with overflow_bef.css
overflow.html with overflow.css
Making Elements Float (p. 194)float.html with float.css
2float.html with 2float.css
Controlling Where Elements Float (p. 195)clear.html with clear.css
Aligning Elements Vertically (p. 196)valign.html with valign.css

12: Style Sheets for Printing

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

Using Media-Specific Style Sheets (p. 198)base.html with print.css
import_print.html with screen.css
Controlling Page Breaks (p. 200)pagebreaks.html with pagebreaks.css with screen.css
Other Print Specific CSS Properties (p. 201)other.html with other.css

13: Lists

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

Creating Ordered and Unordered Lists (p. 204)orderedlists.html
unordered.html
Choosing Your Markers (Bullets) (p. 206)markers.html with markers.css
Choosing Where to Start List Numbering (p. 207)start_value.html
Using Custom Markers (p. 208)custommarkers.html with custommarkers.css
Controlling Where Markers Hang (p. 209)position.html with position.css
Setting All List-Style Properties at Once (p. 210)liststyle.html with liststyle.css
Creating Definition Lists (p. 211)definitionlists.html with definitionlists.css
Styling Nested Lists (p. 212)nested.html with nested.css

14: Tables

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

Tables (p. 215)rowspan.html with colspan.css
Creating a Simple Table (p. 217)simple.html with simple.css
Adding a Border (p. 218)border_html.html with simple.css
border_css.html with border.css
border_css_nohtml.html with border.css
border_none_css.html with border_none.css
Setting the Width (p. 220)width.html with width.css
width_toosmall.html with width_toosmall.css
width_bigger.html with width_bigger.css
Centering a Table on the Page (p. 222)center_css.html with center.css
center_css_nohtml.html with center.css
center_html.html with width.css
Wrapping Text around a Table (p. 223)wrap.html with wrap.css
float.html with float.css
Combining Tables (p. 224)nest.html with nest.css
multiple.html with nest.css
Aligning a Cell’s Contents (p. 226)valign.html with nest.css
align_css_nohtml.html with align.css
Changing the Background (p. 228)bgcolor_html.html with bgcolor_html.css
background_css_nohtml.html with background.css
Controlling the Space (p. 230)space_html.html with background.css
space_nbsp.html with background.css
space_css.html with space.css
space_css_nohtml.html with space.css
Spanning a Cell across Columns (p. 232)colspan.html with colspan.css
Spanning a Cell across Rows (p. 233)rowspan.html with colspan.css
Dividing Your Table into Column Groups (p. 234)colgroup.html with colgroup.css
col.html with col.css
Dividing the Table into Horizontal Sections (p. 236)tbody.html with tbody.css
Choosing Which Borders to Display (p. 237)frame.html with frame.css
rules_cols.html with frame.css
rules_cols_vsides.html with frame.css
rules_groups.html with frame.css
Controlling Line Breaks in a Cell (p. 239)nowrap_bef.html with frame.css
nowrap.html with frame.css
Speeding up Table Display (p. 240)tabledisplay.html with tabledisplay.css

15: Frames

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

Creating a Simple Frameset (p. 242)bcntour.html
banner.html with banner.css
buttons.html with buttons.css
openingpage.html with opening.css
Creating Frames in Columns (p. 244)bcntourcols.html
bannercols.html with banner.css
buttonscols.html with buttons.css
openingpagecols.html with opening.css
Creating Frames in Rows and Columns (p. 245)photosrc.html
Combining Framesets (p. 246)bcntourrc.html
Creating an Inline Frame (p. 248)bcntourfloat.html
Adjusting a Frame’s Margins (p. 249)margin.html
Showing or Hiding Scroll Bars (p. 250)noscrolls.html
Adjusting the Color of the Borders (p. 251)coloredb.html
Adjusting the Frame Borders (p. 252)borderthickness.html
borderth1.html
noborders.html
noframeborder.html
Keeping Visitors from Resizing Frames (p. 254)noresize.html
Targeting Links to Particular Frames (p. 255)bcntourrctarget.html
indexcity.html
Targeting Links to Special Spots (p. 256)bcntourrcrambles.html
rambles.html
Changing the Default Target (p. 257)indextarget.html
Nesting Framesets (p. 258)nest.html
Offering Alternatives to Frames (p. 259)noframes.html
Embedding Content with Objects (p. 260)object.html
object_nested.html
Making Frames More Accessible (p. 262)accessible.html

16: Forms

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

Getting a Script (p. 266)CPAN
Using the Scripts Included with This Book (p. 267)CGI Scripts
Creating a Form (p. 269)mainform.html with display_results.pl
Sending Form Data via E-mail (p. 270)emailform.html
Using a Form Hosting Service (p. 271)Response-o-Matic
Creating Text Boxes (p. 272)mainform.html with display_results.pl
Creating Password Boxes (p. 273)mainform.html with display_results.pl
Creating Radio Buttons (p. 274)mainform.html with display_results.pl
Creating Checkboxes (p. 275)mainform.html with display_results.pl
Creating Menus (p. 276)mainform.html with display_results.pl
optgroup.html with display_results.pl
Creating Larger Text Areas (p. 278)mainform.html with display_results.pl
Allowing Visitors to Upload Files (p. 279)upload.html with uploading.cgi (change name to "uploading.cgi" before using)
Creating the Submit Button (p. 282)mainform.html with display_results.pl
button.html with button.css with vote.cgi
Resetting the Form (p. 284)mainform.html with display_results.pl
button.html with button.css with vote.cgi
Using an Image to Submit Data (p. 286)zonemap.html with zonemap.cgi
Organizing the Form Elements (p. 287)fieldset.html with display_results.pl
Formally Labeling Form Parts (p. 288)label.html with display_results.pl
Setting the Tab Order in a Form (p. 289)taborder.html with display_results.pl
Adding Keyboard Shortcuts (p. 290)keyboard.html with vote.cgi
Disabling Form Elements (p. 291)disabled.html with vote.cgi
Keeping Elements from Being Changed (p. 292)readonly.html with vote.cgi

17: Multimedia

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

Of Plugins and Players (p. 294)madmax2object.html
madmax.html
Arun Ranganathan’s Plugins article
Embedding QuickTime Movies (p. 298)madmax.html
Scaling a QuickTime Movie (p. 300)madmax_scale.html
Looping a QuickTime Movie (p. 301)madmax_loop.html
Putting QuickTime Sounds on a Page (p. 302)madmax_justsound.html
Hiding QuickTime Sounds (p. 303)madmax_hiddensound.html
Embedding Windows Media Player Files (p. 304)madmaxwmp.html
Inserting Java Applets (p. 306)javaobject.html
Linking to Multimedia Files (p. 308)madmax_link.html
Creating an Automatic Slide Show (p. 309)slideshow.html with slides.css
page2.html
page3.html
page4.html
Creating a Marquee (p. 310)marquee.html
Adding Background Sound (p. 311)bgsound.html

18: Scripts

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

Adding an “Automatic” Script (p. 314)simple.html
Calling an External Automatic Script (p. 315)extern.html with extscript.txt
Triggering a Script (p. 316)event_bef.html
event.html
Creating a Button that Executes a Script (p. 318)button.html
Adding Alternate Information (p. 319)noscript.html
Hiding Scripts from Older Browsers (p. 320)hide.html
Hiding Scripts from XML Parsers (p. 321)time.xml
Setting the Default Scripting Language (p. 322)default.html

19: 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. 324)time.html with time.js
Changing a Link’s Status Label (p. 325)statuslabel.html
Changing Multiple Frames with One Link (p. 326)wildanimals.html
Keeping Frames in Their Framesets (p. 327)geese.html with keepinframe.js
Changing an Image When a Visitor Points (p. 328)rollover.html
Loading Images into Cache (p. 330)loadimages.html with loadimages.js
Controlling a New Window’s Size (p. 331)hawthorne.html

20: 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. 333)Alan Wood’s Unicode Resources
(X)HTML Entity References
Saving Your Page with the Proper Encoding (p. 336)Common Character Encodings
Declaring Your Page’s Character Encoding (p. 338)japanesehtml.html
japanesehtml_nometa.html
Adding Characters from Outside the Encoding (p. 340)Unicode.org charts
(X)HTML Entity References
references.html
Specifying Your Page’s Language (p. 342)lang_fr.html

21: Formatting: The Old Way

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

Choosing Default Characteristics for Text (p. 344)basefont.html
Formatting Bits of Text (p. 346)font.html
Another Way to Choose Default Colors (p. 348)text.html
Changing the Color of Links (p. 349)links.html
Striking Out or Underlining Text (p. 350)lines.html
Making Text Blink (p. 351)blink.html

22: Layout: The Old Way

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

Using Background Color (p. 354)bgcolor.html
Using Background Images (p. 355)background.html
Centering Elements on a Page (p. 356)center.html
Specifying the Margins (p. 357)margins.html
Keeping Lines Together (p. 358)nobr.html
Creating Discretionary Line Breaks (p. 359)wbr.html
Specifying the Space Between Paragraphs (p. 360)spacer_vertical.html
Creating Indents (p. 361)spacer_horizontal.html
Creating Indents (with Lists) (p. 362)listindents.html
Creating Blocks of Space (p. 363)block.html
Using Pixel Shims (p. 364)pixelshim.html
Creating Columns (p. 365)multicol.html
Positioning Elements with Layers (p. 366)layers.html
layer_ext.html

23: WML: Web Pages for Mobile Devices

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

Preparing Your Server (p. 370)htaccess
Starting Your WML Page (p. 371)start.wml
Creating a Card (p. 372)card.wml
Creating Basic Content (p. 373)basic.wml
Including an Image (p. 374)image.wml
Creating a Table (p. 375)table.wml
Creating a Link (p. 376)link.wml
Programming Buttons (p. 378)do.wml
Creating Conditional Actions (p. 380)conditional.wml
Scheduling an Action (p. 381)schedule.wml
Making a Call (p. 382)makecall.wml
Setting and Using Variables (p. 383)setvariable.wml
Creating Input Boxes (p. 384)input.wml
Creating Menus (p. 386)menu.wml
optgroup.wml
Processing Data from Visitors (p. 388)process.wml with processwml.cgi
Creating Elements on Multiple Pages (p. 390)template.wml
Restricting Access to a Deck (p. 391)access.wml
Testing WML pages (p. 392)Forum Nokia
Openwave Developer Program
Ericsson Mobility World

24: 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. 394)W3C (X)HTML Validator
W3C CSS Validator
validator.html
Testing Your Page (p. 398)testpage.html with testpage.css
When the Browser Displays the Code (p. 400)wordsavewebpage.html
When Images Don’t Appear (p. 401)noimages.html
Differences from Browser to Browser (p. 402)csssupport.html
When Nothing Appears in Netscape 4 (p. 403)closingtags.html
Still Stuck? (p. 404)Question and Answer Forum
Getting Your Own Domain Name (p. 407)InterNIC - Registrar List
Transferring Files to the Server (p. 408)Ipswitch
Fetch Softworks

26: 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. 415)Search Engine Optimization - FREE! (Paul Boutin)
Sending Search Engine Traffic to Your Site (Paul Boutin)
SearchEngineWatch
About Keywords (p. 416)barcaeng.html with barcaeng.css
Explicitly Listing Keywords (p. 417)keywords_meta.html
Providing a Description of Your Page (p. 418)description_meta.html
Search MSN for “barcelona market”
Controlling Other Information (p. 419)otherinfo_meta.html
Keeping Visitors Away (p. 420)robotsout.html
Keeping Pages From Being Archived (p. 421)noarchive.html
Creating a Crawler Page (p. 422)bookmarks.html
Submitting Your Site to a Search Engine (p. 424)Add your URL to Google
Yahoo! - How to Suggest Your Site
Altavista - Submit a Site
Other Techniques for Publicizing Your Site (p. 427)My readers gallery

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

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

Index

Index (p. 465)Index