Code Examples

Scroll down the page or select a chapter from the list to view the code examples.

  1. Chapter 01
  2. Chapter 03
  3. Chapter 04
  4. Chapter 05
  5. Chapter 06
  6. Chapter 07
  7. Chapter 08
  8. Chapter 09
  9. Chapter 10
  10. Chapter 11
  11. Chapter 12
  12. Chapter 13
  13. Chapter 14
  14. Chapter 15
  15. Chapter 16
  16. Chapter 17
  17. Chapter 18
  18. Chapter 19
  19. Chapter 20

Or

Download All Code Examples [ZIP, 9.4 MB]

Note:

  • The page numbers shown below aren't necessarily accurate if you have either the EPUB or Kindle version of the book, because pages flow differently in those formats.
  • "Fig" is short for "Figure" and "Figs" is short for "Figures."
  • An item marked as an "Extra" represents an example that doesn't appear in the book.
  • Chapters 2 and 21 aren't shown because they don't contain any examples.

Chapter 1 Web Page Building Blocks

  1. A Basic HTML Page

    Page 3, Fig B: basic-html-page.html

  2. Semantic HTML: Markup with Meaning

    Page 6, Fig A: basic-html-page-with-2nd-paragraph.html

  3. A Web Page's Text Content

    Page 16, Figs A and C: page-text-content.html

Chapter 3 Basic HTML Structure

  1. Starting Your Web Page

    Page 43, Fig A: starting-web-page.html

  2. Creating a Title

    Page 46, Fig A: creating-a-title.html

  3. Creating Headings

    Page 48, Fig A: creating-headings.html

    Page 49: h1-h6-default-display.html

  4. Understanding HTML5's Document Outline

    Page 55, Fig E: doc-outline-sample-version4.html

    Page 57 (sidebar): doc-outline-sample-syndicated.html

  5. Grouping Headings

    Page 58, Fig A: grouping-headings.html

  6. Creating a Header

    Page 61, Fig A: creating-a-header.html

    Page 62, Fig C: page-with-two-header-elements.html

  7. Marking Navigation

    Page 64, Fig A: marking-navigation.html

  8. Creating an Article

    Page 68, Fig A: creating-an-article.html

  9. Defining a Section

    Page 72, Fig A: defining-a-section.html

  10. Specifying an Aside

    Page 75, Fig A: specifying-an-aside.html

  11. Creating a Footer

    Page 80, Fig A: creating-a-footer.html

  12. Creating Generic Containers

    Page 84, Fig A: no-divs.html

    Page 84, Fig B: creating-generic-containers.html

    Page 87, Fig E: divs-with-ids.html

  13. Improving Accessibility with ARIA

    Page 88, Fig A: improving-accessibility-aria.html

  14. Naming Elements with a Class or ID

    Page 93, Fig A: naming-with-class-id.html

  15. Adding the Title Attribute to Elements

    Page 95, Fig A: adding-title-attribute.html

  16. Adding Comments

    Page 96, Fig A: adding-comments.html

Back to Top

Chapter 4 Text

  1. Starting a New Paragraph

    Page 100, Fig A: starting-paragraph.html

  2. Adding Author Contact Information

    Page 102, Fig A: author-contact-information.html

  3. Creating a Figure

    Page 104, Fig A: creating-a-figure.html

  4. Specifying Time

    Page 106, Fig A: specifying-time.html

    Page 107, Fig C: specifying-time-more-examples.html

  5. Marking Important and Emphasized Text

    Page 110, Fig A: important-and-emphasized-text.html

  6. Indicating a Citation or Reference

    Page 112, Fig A: indicating-a-citation.html

  7. Quoting Text

    Page 113, Fig A: quoting-text-blockquote.html

    Page 114, Fig C: quoting-text-q.html

  8. Highlighting Text

    Page 116, Fig A: highlighting-text.html

    Page 117, Fig C: highlighting-text-example2.html

  9. Explaining Abbreviations

    Page 118, Fig A: abbreviations.html

  10. Defining a Term

    Page 120, Fig A: defining-instance-of-term.html

  11. Creating Superscripts and Subscripts

    Page 124, Fig A: superscript-and-subscript.html

  12. Noting Edits and Inaccurate Text

    Page 124, Fig A: noting-edits-del-ins.html

    Page 125, Fig C: noting-edits-del-ins-example2.html

    Page 126, Fig E: noting-inaccurate-text-s.html

  13. Marking Up Code

    Page 128, Fig A: marking-up-code.html

    Page 129 (sidebar): kbd-samp-var.html

  14. Using Preformatted Text

    Page 130, Fig A: preformatted-text.html

  15. Specifying Fine Print

    Page 132, Fig A: specifying-fine-print.html

  16. Creating a Line Break

    Page 133, Fig A: creating-line-break.html

  17. Creating Spans

    Page 134, Fig A: creating-spans.html

  18. Other Elements

    Page 136 (u element): unarticulated-text.html

    Page 137 (wbr element): creating-line-break-opportunity.html

    Page 138 (ruby, rp, and rt elements): ruby-annotations.html

    Page 138 (ruby, rp, and rt elements): ruby-annotations-example2.html

    Page 141 (bdi element): bdi.html

    Page 142 (meter element): using-meter-to-provide-gauge.html

    Page 144 (progress element): indicating-progress.html

    Page 144 (progress element): indicating-progress-example2.html

Back to Top

Chapter 5 Images

Note: To keep the examples simple for this chapter, all the HTML and image files are in the same folder. This is absolutely not what I recommend you do when building your pages. Instead, it is common practice to keep your files organized by placing images in a separate folder ("img" and "images" are popular folder names). The path to your image in the src value of each img element needs to reflect this.

For example, currently the HTML that loads the image in specifying-img-size.html is as follows (the image path is highlighted):

<img src="cornermarket.jpg" alt="Fruit Stand in Market" width="300" height="399" />

If you were to move cornermarket.jpg to a folder called "images" in the same directory as the HTML page, you would need to change the src value in the code as shown below:

<img src="images/cornermarket.jpg" alt="Fruit Stand in Market" width="300" height="399" />

You can see working examples in the Chapter 6 files (such as the first page, link-to-page.html). They reference images in a folder called img.

  1. Inserting Images on a Page

    Page 156, Fig A: inserting-an-image.html

  2. Offering Alternate Text

    Page 157, Fig A: alternate-text.html

  3. Specifying Image Size

    Page 159, Fig D: specifying-img-size.html

  4. Scaling Images with the Browser

    Page 160, Fig A: scaling-image-before.html (image shows at native size)

    Page 160, Fig B: scaling-image-after.html (image is scaled down)

  5. Adding Icons for Your Web Site

    Page 162, Fig B: favicon.html

Back to Top

Chapter 6 Links

  1. Creating a Link to Another Web Page

    Page 167, Fig A: link-to-page.html

    Page 168, Fig D: block-level-link.html

    Page 169, Fig F: link-to-page-on-another-site.html

  2. Creating Anchors

    Page 172, Fig A: anchor-links.html

    Page 173, Fig B: anchor-links-with-sections.html

  3. Linking to a Specific Anchor

    See the previous two examples.

  4. Creating Other Kinds of Links

    Page 175, Fig A: other-kinds-of-links.html

Back to Top

Chapter 7 CSS Building Blocks

  1. Adding Comments to Style Rules

    Pages 182-183, Figs A-D: css-comments.css

  2. The Cascade: When Rules Collide

    Page 184, Figs A and B: the-cascade.css and the-cascade.html

    Page 186, Figs D and E: specificity.css and specificity.html

  3. A Property's Value

    Page 192, Fig I: rgba.css (view results in rgba.html)

    Page 194: hsla.css

    Page 195, Fig L: rgba-with-opaque-fallback.css

    Page 195, Fig M: rgba-older-versions-ie.css

Back to Top

Chapter 8 Working with Style Sheets

  1. Creating an External Style Sheet

    Page 198, Fig A: base.css

  2. Linking to External Style Sheets

    Page 200, Figs A and B: base.css and link-external-style-sheet.html

    Page 201, Fig D: link-external-style-sheet-example2.html (it also uses base.css)

  3. Creating an Embedded Style Sheet

    Page 202, Fig A: create-embedded-style-sheet.html

  4. Applying Inline Styles

    Page 204, Fig A: apply-inline-style.html

  5. The Importance of Location

    Page 206, Fig A: importance-of-location.html (it also uses base.css)

    Page 207, Fig C: importance-of-location-example2.html (it also uses base.css)

  6. Using Media-Specific Style Sheets

    Page 208, Fig A: media-specific-style-sheets.html (it also uses base.css and print.css)

    Page 209, Fig B: base-with-media-print.css

  7. Offering Alternate Style Sheets

    Page 210, Figs A-D: alternate-style-sheet.html, base.css, preferred.css, and alternate.css

Back to Top

Chapter 9 Defining Selectors

  1. Selecting Elements by Name

    Pages 216-217, Figs A and B: select-by-element-name.html and name.css

  2. Selecting Elements by Class or ID

    Pages 218-219, Figs A and B: select-by-class.html and class.css

    Page 220 (second tip): select-by-id.html and id.css

  3. Selecting Elements by Context

    Page 221, Figs A-C: select-by-context.html and context.css (includes Figs B and C)

    Page 223, Fig E: child-selector.css (view results in select-by-child-selector.html)

    Page 224, Fig G: first-child-selector-no-effect.css (view results in select-by-first-child-no-effect.html)

    Page 225, Fig I: first-child-selector.css (view results in select-by-first-child.html)

    Page 226, Fig K: adjacent-sibling-combinator.css (view results in select-by-adjacent-sibling.html)

  4. Selecting Part of an Element

    Page 227, Figs A and B: select-by-first-line.html and first-line-selector.css

    Page 228, Fig D: first-letter-selector.css (view results in select-by-first-letter.html)

  5. Selecting Links Based on Their State

    Page 230, Figs A and B: select-links-by-state.html and links-by-state.css

  6. Selecting Elements Based on Attributes

    Page 232-233, Figs A and B: select-by-attribute.html and attribute-selector.css

    Extra Examples: select-by-attribute-various.html and attribute-selector-various.css

  7. Specifying Groups of Elements

    Pages 236-237, Figs A and B: select-by-groups.html and groups.css

  8. Combining Selectors

    Page 238, Fig A: combining-selectors.css (view results in combining-selectors.html)

Back to Top

Chapter 10 Formatting Text with Styles

  1. Page 242, Fig A: no-styles.html (page without any CSS applied except browser defaults)

  2. Choosing a Font Family

    Page 243, Fig A: font-family.css (view results in font-family.html)

  3. Specifying Alternate Fonts

    Page 244, Fig A: font-family-alternate.css (view results in font-family-alternate.html)

  4. Creating Italics

    Page 246, Fig A: font-style-italic.css (view results in font-style-italic.html)

  5. Applying Bold Formatting

    Page 248, Fig A: font-style-bold.css (view results in font-style-bold.html)

  6. Setting the Font Size

    Page 250, Fig A: font-size-pixels.css (view results in font-size-pixels.html)

    Page 251, Fig C: font-size-ems.css (view results in font-size-ems.html)

  7. Setting the Line Height

    Page 255, Fig A: line-height.css (view results in line-height.html)

  8. Setting All Font Values at Once

    Page 256, Fig A: font-shorthand.css (view results in font-shorthand.html)

  9. Setting the Color

    Page 258, Fig A: font-color.css (view results in font-color.html)

  10. Changing the Text’s Background

    Page 260, Fig A: background.css (view results in background.html)

  11. Controlling Spacing

    Page 264, Fig A: spacing.css (view results in spacing.html)

  12. Adding Indents

    Page 265, Fig A: text-indent.css (view results in text-indent.html)

  13. Setting White Space Properties

    Page 266-267, Figs A and B: whitespace.css and whitespace.html

  14. Aligning Text

    Page 268, Fig A: aligning-text.css (view results in aligning-text.html)

  15. Changing the Text Case

    Page 270, Fig A: text-case.css (view results in text-case.html)

  16. Using Small Caps

    Page 271, Fig A: small-caps.css (view results in small-caps.html)

  17. Decorating Text

    Page 272, Fig A: text-decoration.css (view results in text-decoration.html)

Back to Top

Chapter 11 Layout with Styles

Note: The vast majority of this chapter entails evolving a single page layout. As such, the CSS file progresses throughout the chapter, building upon the styles added in the previous pages.

If you want to bypass the steps, there are four versions of the finished page. All four CSS files with filenames begininning with "base" are the same except where explained below. The HTML and CSS files contain comments that elaborate on particular aspects of the code, too:

  1. Structuring Your Pages

    Pages 280-281, Fig A: no-styles.html
    (the same as finished-page.html, but without any CSS applied except browser defaults)

  2. Styling HTML5 Elements in Older Browsers

    Page 286-287: html5-elements-styling.css (step 1) and html5-elements-styling.html (step 2)

  3. Resetting or Normalizing Default Styles

    Page 290, Fig A: reset.html and reset.css

    Page 291, Fig B: normalize.html and normalize.css

    Page 291, Fig C: reset-and-text-formatting.html and reset-and-text-formatting.css
    (this is the starting point for the rest of the chapter)

  4. Changing the Background

    Page 294, Fig A: background-image.css (view results in background-image.html)

    Page 296, Fig D: background-shorthand.css (view results in background-shorthand.html)

  5. Setting the Height or Width for an Element

    Page 298, Fig A: width-height.css (view results in width-height.html)

    Page 299, Fig C: max-width.css (view results in max-width.html)

  6. Setting the Margins around an Element

    Page 302, Fig A: margins.css (view results in margins.html)

    Page 303, Fig C: margins-more.css (view results in margins-more.html)

  7. Adding Padding around an Element

    Page 304, Fig A: padding.css (view results in padding.html)

    Page 304, Fig C: padding-c.css (view results in padding-c.html)

    Page 305, Fig E: padding-e.css (view results in padding-e.html)

  8. Making Elements Float

    Page 306, Fig A: floats-imgs.css (view results in floats-imgs.html)

    Page 306, Fig C: floats-imgs-no-wrapping.css (view results in floats-imgs-no-wrapping.html)

    Page 307, Fig E: floats-main-div.css (view results in floats-main-div.html)

  9. Controlling Where Elements Float

    Page 308, Fig A: floats-clear.css (view results in floats-clear.html)

    Page 308, Fig C: floats-add-to-masthead.css (view results in floats-add-to-masthead.html)

    Page 309, Fig E: floats-clearfix.css (view results in floats-clearfix.html)

  10. Setting the Border

    Page 311, Fig A: setting-borders.css (view results in setting-borders.html)

    Page 312, Fig D: border-styles.html (the CSS is embedded in the HTML)

  11. Offsetting Elements in the Natural Flow

    Page 314, Fig A: position-relative.css (view results in position-relative.html)

  12. Positioning Elements Absolutely

    Page 316, Fig B: position-absolute.css (view results in position-absolute.html)

    Page 316, Fig D: position-absolute-relative.css (view results in position-absolute-relative.html)

    Page 317, Fig F: nav-margin.css (view results in nav-margin.html)

  13. Positioning Elements in 3D

    Page 318-319, Figs A and B: z-index.html (the CSS is embedded in the HTML)

  14. Determining How to Treat Overflow

    Page 320, Fig B: overflow-hidden.css (view results in overflow-hidden.html)

    Page 321, Fig D: overflow-auto.css (view results in overflow-auto.html)

  15. Aligning Elements Vertically

    Page 322, Fig B: vertical-align.css (view results in vertical-align.html)

  16. Changing the Cursor

    Page 323, Fig B: change-cursor.css (view results in change-cursor.html)

  17. Displaying and Hiding Elements

    Page 324, Fig A: display-img-default.html (default img display with no CSS applied)

    Page 324, Fig C: display-block.html (the CSS is embedded in the HTML)

    Page 325, Fig E: display-none.html (the CSS is embedded in the HTML)

Back to Top

Chapter 12 Style Sheets for Mobile to Desktop

  1. Understanding and Implementing Media Queries

    Page 333, Fig A: link-element-media-query.html (it also uses base.css and styles-480.css)
    Please note that this version of base.css is different than the one that follows in the other examples.

    Page 334, Figs B and C: basic-media-query.css and basic-media-query.html

    Page 336, Fig G: link-element-media-query-more-examples.html

    Page 337, Fig H: media-queries-in-stylesheet-more-examples.css

    Extra for maximum-scale discussions on page 338-339, tip and sidebar: basic-media-query-max-scale.html

    Page 339, Figs I and J in sidebar: 320x480-no-viewport-meta.html and
    320x480-with-viewport-meta-width-and-initial-scale.html (view on a phone to notice the difference)

  2. Building a Page that Adapts with Media Queries

    Page 340, Fig A: global-base-styles-only.css (view results in base-styles-only.html)

    The finished page as shown in the steps throughout chapter:

    Page 342-245, Figs C-J: finished-page.html and global.css

    The finished page, but with selectors that reference ARIA landmark roles instead of ids where appropriate. (RECOMMENDED approach if IE6 is not a concern):

    Extra: finished-page-selectors-with-landmark-roles.html and global-selectors-with-landmark-roles.css

Back to Top

Chapter 13 Working with Web Fonts

Note: The filenames in the samples below do not always correlate to the filenames mentioned in the chapter. For instance, both stylesheet.css and demo2.html evolve during the chapter, so I had to create multiple versions of them to provide you the files in their various stages.

  1. Downloading Your First Web Font

    Pages 358-359, Figs A-C: demo.html and stylesheet.css (from Font Squirrel ZIP)

  2. Working with @font-face

    Page 360, Fig A: stylesheet.css (same as the previous stylesheet.css)

    Page 361, Fig B: demo.html (same as the previous demo.html)

    Page 362-364, Steps 2-6: stylesheet-multiple-webfonts.css (steps 2-4) and demo2.html (steps 5-6)

  3. Styling Web Fonts and Managing File Size

    Page 366-367, Steps 1-2: demo2-fake-italic-bold.html (it also uses stylesheet-multiple-webfonts.css)

    Page 367-369, Steps 3-5: demo2-italic-bold.html (it also uses stylesheet-multiple-webfonts-italic-bold.css)

Back to Top

Chapter 14 Enhancements with CSS3

  1. Rounding the Corners of Elements

    Page 378-379, Figs A and C: rounded-corners.html and rounded-corners.css

    Page 381, Fig E: rounded-corners-more-examples.css (view results in rounded-corners-more-examples.html)

  2. Adding Drop Shadows to Text

    Page 382-383, Figs A and C: text-shadow.html and text-shadow.css

  3. Adding Drop Shadows to Other Elements

    Page 384-385, Figs A and C: box-shadow.html and box-shadow.css

  4. Applying Multiple Backgrounds

    Page 388-389, Figs A and C: multiple-backgrounds.html and multiple-backgrounds.css

  5. Using Gradient Backgrounds

    Page 390-392, Figs A and C-G: gradients.html and gradients.css

  6. Setting the Opacity of Elements

    Page 394, Figs A and B: opacity-default.html (it also uses opacity-default.css)

    Page 394, Figs A and C: opacity.html and opacity.css

    Page 395, Fig E: opacity-ie-filter.css (view results in opacity-ie-filter.html)

  7. Extra: Combining the Chapter's Effects

    Extra: putting-it-all-together.html and putting-it-all-together.css

Back to Top

Chapter 15 Lists

  1. Creating Ordered and Unordered Lists

    Page 398, Fig A: ordered-list.html

    Page 399, Fig C: unordered-list.html

  2. Choosing Your Markers

    Page 401, Figs A and B: choosing-your-markers.html (the CSS is embedded in the HTML)

  3. Choosing Where to Start List Numbering

    Page 403, Fig A: choosing-where-to-start-numbering.html

  4. Using Custom Markers

    Page 404, Figs A and B: using-custom-markers.html and using-custom-markers.css

  5. Controlling Where Markers Hang

    Page 406, Fig B: controlling-where-markers-hang.html (the CSS is embedded in the HTML)

  6. Setting All List-Style Properties at Once

    Page 407, Fig A: setting-all-list-style-properties.html (the CSS is embedded in the HTML)

  7. Styling Nested Lists

    Page 408, Figs A and B: nested-lists.html and nested-lists.css

    Page 410-411, Fig D and sidebar: dropdown-nav.html and dropdown-nav.css

  8. Creating Description Lists

    Page 412, Figs A and B: description-list.html (the CSS is embedded in the HTML)

    Page 413, Figs D and E: description-list-multiple-dts.html (the CSS is embedded in the HTML)

    Page 414-415, Figs G and H: description-list-nested.html and description-list-nested.css

Back to Top

Chapter 16 Forms

  1. Creating Forms

    Page 419, Fig A: form.html (This is the main form discussed throughout the chapter.)

    Page 420, Fig B: form.css

  2. Processing Forms

    Page 421-422, Fig A: showform.txt
    (NOTE: The code in the book contains an error in the part that displays the Email checkbox values. The code is correct in the version here.)
    (NOTE: You will need to change the name of this file to showform.php in order for it to work on your server. You will also need to have PHP installed, which is very common for web hosting services.)

  3. Sending Form Data via Email

    Page 424, Fig A: emailform.txt (view the form at form-email.html)
    (NOTE: You will need to change the name of emailform.txt to emailform.php in order for it to work on your server. You will also need to have PHP installed, which is very common for web hosting services.)

Back to Top

Chapter 17 Video, Audio, and Other Multimedia

Reminder: Include the HTML5 shiv in the head of your HTML if you'd like Internet Explorer 6, 7, and 8 to recognize HTML5 elements and render the CSS you apply to them. (It *won't* make the video or audio element work in these older browsers, though.) See "About the HTML5 Shiv" in Chapter 11 (p.287) for details, or see http://code.google.com/p/html5shiv/.

Note: Some browsers may not play your media files unless they are served as the proper MIME type. Essentially, this means that when the server sends the page to the browser, it identifies the media file as, say, a WebM file (MIME type video/webm) or an MP4 file (MIME type video/mp4). If you're site is running on the Apache web server, you can configure the MIME types in what is known as the .htaccess file. It's a text file you typically upload to the root directory of your site, alongside your Home page. Here are the media-related MIME types to add to your .htaccess file:


   AddType video/ogg .ogm
   AddType video/ogg .ogv
   AddType audio/ogg .ogg
   AddType video/mp4 .mp4
   AddType video/webm .webm
   AddType text/plain .srt

Ask your web hosting company or search online for more information about .htaccess files.

  1. Adding a Single Video to Your Web Page

    Page 453, Fig A: webm-video.html

  2. Adding Controls and Autoplay to Your Video

    Page 455, Fig A: webm-video-with-controls.html

    Page 456, Fig G: webm-video-with-controls-autoplay.html

  3. Looping a Video and Specifying a Poster Image

    Page 457, Fig A: webm-video-with-autoplay-loop.html

    Extra: mp4-video-with-autoplay-loop.html

    Page 457, Fig B: webm-video-with-poster-image.html

  4. Preventing a Video from Preloading

    Page 458, Fig A: webm-video-with-preload-none.html

  5. Using Video with Multiple Sources

    Page 459, Fig A: video-with-sources-and-msg-fallback.html

  6. Adding Video with Hyperlink Fallbacks

    Page 461, Fig A: video-with-sources-and-link-fallback.html

  7. Adding Video with Flash Fallbacks

    Page 463, Fig A: video-with-sources-and-flash-fallback.html

    Page 464, Fig B: video-with-sources-and-flash-link-fallback.html
    (Note: There is an error in the book. The code in Fig B is supposed to be in Fig C on page 465, and the screenshot in Fig C is supposed to be in Fig B.)

  8. Adding a Single Audio File to Your Web Page

    Page 469, Fig A: ogg-audio.html

  9. Adding a Single Audio File with Controls to Your Web Page

    Page 470, Fig A: ogg-audio-with-controls.html

  10. Adding Controls and Autoplay to Audio in a Loop

    Page 472, Fig A: ogg-audio-with-autoplay-controls.html

    Page 472, Fig C: ogg-audio-with-loop-controls.html

  11. Preloading an Audio File

    Page 473, Fig A: ogg-audio-with-preload-metadata.html

    Page 473, Fig B: ogg-audio-with-preload-auto.html

  12. Providing Multiple Audio Sources

    Page 474, Fig A: audio-with-sources.html

  13. Adding Audio with Hyperlink Fallbacks

    Page 475, Fig A: audio-with-sources-and-link-fallback.html

  14. Adding Audio with Flash Fallbacks

    Page 476, Fig A: audio-with-sources-and-flash-fallback.html

  15. Adding Audio with Flash and a Hyperlink Fallback

    Page 478, Fig A: audio-with-sources-and-flash-link-fallback.html

  16. Embedding Flash Animation

    Page 482, Fig A: embed-flash-animation.html

Back to Top

Chapter 18 Tables

  1. Structuring Tables

    Page 490, Fig A: table.html

    Page 491, Fig C: table-evolved.html

    Page 492-493, Fig D and E: table.css and table-evolved-and-styled.html
    (the same as table-evolved.html except it loads the style sheet)

  2. Spanning Columns and Rows

    Page 494, Fig A: table-with-colspan-rowspan.html and table-with-colspan-rowspan.css (Extra)

Back to Top

Chapter 19 Working with Scripts

Note: You won't gain much from viewing these pages in a browser; their value is in the HTML code and comments. In particular, I've included comments in load-before-body-end-tag.html and load-before-body-end-tag-subfolder.html about why the code in the latter is preferred from the standpoint of organizing your JavaScript files.

  1. Loading an External Script

    Page 499, Fig A: load-before-body-end-tag.html

    Extra: load-before-body-end-tag-subfolder.html (preferred; it loads the JS from a sub-folder)

    Page 499, Fig B: load-in-head.html

  2. Adding an Embedded Script

    Page 502, Fig A: embedded-before-body-end-tag.html

    Page 502, Fig B: embedded-in-head.html

Back to Top

Chapter 20 Testing & Debugging Web Pages

  1. Checking the Easy Stuff: HTML

    Page 511, Fig H: start-tag-error.html

  2. Validating Your Code

    HTML5 Validator

    W3C HTML Validator (including HTML5)

    W3C CSS Validator

    Page 514-515, Fig A and C: mary-anna-error.html

    Extra: mary-anna-fixed.html

  3. Testing Your Page

    Page 516, Fig B: testing-your-page-error.html

    Extra: testing-your-page-fixed.html and styles.css (results shown on page 517, Fig C)

Back to Top