Code Examples

Last update:

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, 17.5 MB]

(The primary reason the ZIP is so large is the media files used by examples in Chapter 6 and Chapter 17.)

Notes:

  • 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 4, Fig A: basic-html-page-no-content.html (no content)

    Page 6, Fig C: basic-html-page.html (with content)

  2. A Web Page's Text Content

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

  3. A Browser's Default Display of Webpages

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

Chapter 3 Basic HTML Structure

Note: The majority of this chapter covers evolving the structure of a page's content. The individual steps are shown after this box. The end result is:

structure-final.html

  1. Starting Your Web Page

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

  2. Creating a Title

    Page 48, Fig A: title-element.html

  3. Creating Headings

    Page 50, Fig A: headings.html

    Page 50, Fig B: headings-user-guide.html

    Page 51, Fig C: headings-h1-h6-default-display.html

    Page 52, Fig D: headings-subheading.html

  4. Creating a Header

    Page 54, Fig A: header.html

    Page 55, Fig D: header-two-header-elements.html

  5. Marking Navigation

    Page 56, Fig A: nav.html

    Page 58, Fig C: nav-deeper-look.html

  6. Marking the Main Area of a Webpage

    Page 59, Fig A: main-content.html

  7. Creating an Article

    Page 60, Fig A: article.html

    Page 62, Figs C + D: article-with-footer-and-comments.html

  8. Defining a Section

    Page 63, Fig A: section-news-site.html

    Page 63, Fig B: section-graduation-program.html

  9. Specifying an Aside

    Page 65, Fig A: aside.html

    Page 68, Ex 1: aside-nested.html

    Page 69, Ex 2: aside-with-nav.html

  10. Creating a Footer

    Page 70, Fig A: footer.html

    Page 72, Fig C: footer-larger.html

    Page 72, Fig D: footer-nested-in-article.html

  11. Creating Generic Containers

    Page 73, Fig A: div-none-but-page-styled.html

    Page 74, Fig B + C: div-with-more-styling.html

    Page 75, Fig D: div-no-page-styling.html

  12. Naming Elements with a Class or ID

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

  13. Adding the Title Attribute to Elements

    Page 84, Fig A: title-attribute.html

  14. Adding Comments

    Page 85, Fig A: comments.html

Back to Top

Chapter 4 Text

  1. Starting a New Paragraph

    Page 88, Fig A: paragraphs.html

  2. Specifying Fine Print

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

  3. Marking Important and Emphasized Text

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

  4. Creating a Figure

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

    Page 93, Fig C: creating-a-figure-styled.html

  5. Indicating a Citation or Reference

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

  6. Quoting Text

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

    Page 95, Fig B: quoting-text-blockquote-in-figure.html

    Page 95, Fig D: quoting-text-q.html

    Page 97, tip: quoting-text-q-nested.html

  7. Specifying Time

    Page 98, Fig A: specifying-time.html

    Page 99, Fig C: specifying-time-as-article-date.html

  8. Explaining Abbreviations

    Page 101, Fig A: abbreviations.html

  9. Defining a Term

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

  10. Creating Superscripts and Subscripts

    Page 104, Fig A: superscripts.html

  11. Adding Author Contact Information

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

  12. Noting Edits and Inaccurate Text

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

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

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

  13. Marking Up Code

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

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

  14. Using Preformatted Text

    Page 114, Fig A: preformatted-text.html

  15. Highlighting Text

    Page 116, Fig A: highlighting-text.html

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

  16. Creating a Line Break

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

  17. Creating Spans

    Page 120, Fig A: creating-spans.html

  18. Other Elements

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

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

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

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

    Page 127 (bdi element): bdi.html

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

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

    Page 130 (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="Oranges, bananas, apples, and other fruit abound at the Mercat de la Boquería." 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="Oranges, bananas, apples, and other fruit abound at the Mercat de la Boquería." 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. Images for the Web: Size (dimensions)

    Page 136, Fig C: size-big.html

    Page 137, Fig D: size-small.html

  2. Images for the Web: Transparency

    Page 138, Fig E1: transparency-stars-blue-bg.html

    Page 138, Fig E2: transparency-stars-red-gradient-bg.html

  3. Inserting Images on a Page

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

  4. Offering Alternative Text

    Page 147, Fig A: alternative-text.html

  5. Specifying Image Size

    Page 151, Fig E: specifying-img-size.html

  6. Scaling Images with the Browser

    Page 152, Fig A: scaling-image-before.html (image shows at native size of 440x340)

    Page 152, Fig B: scaling-image-after.html (image is scaled down to 220x170)

  7. Adding Icons for Your Web Site

    Page 155: favicon.html (referencing them in your page explicitly)

Back to Top

Chapter 6 Links

  1. Creating a Link to Another Web Page (and Other Link Basics)

    Page 159, Fig B: link-to-page.html (it has a link to pioneer-valley.html)

    Page 160, Fig E: link-to-page-on-another-site.html

    Page 161, Fig H: block-level-link.html (it has a link to giraffe-escapes.html)

  2. Creating and Linking to Anchors

    Page 164, Fig A: anchor-links.html

  3. Creating Other Kinds of Links

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

Back to Top

Chapter 7 CSS Building Blocks

  1. Constructing a Style Rule

    Page 171, Figs B and C: constructing-a-rule.html

  2. Adding Comments to Style Rules

    Pages 172-173, Figs A through E: css-comments.css

  3. Understanding Inheritance

    Page 174, Fig A inheritance-not-styled.html (before CSS applied)

    Page 175, Fig C inheritance.css (view results in inheritance.html)

  4. The Cascade: When Rules Collide

    Page 177, Figs A and B: specificity.css and specificity.html

  5. A Property's Value

    Page 184-185, Figs I and J: rgba.css and rgba.html

    Extra: rgba-with-opaque-fallback-in-same-rule.css

    Page 187, Fig O: hsla.css (view results in hsla.html)

Back to Top

Chapter 8 Working with Style Sheets

  1. Creating an External Style Sheet

    Page 190, Fig A: style.css

  2. Linking to External Style Sheets

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

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

  3. Creating an Embedded Style Sheet

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

  4. Applying Inline Styles

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

    Page 197, Fig C and D: class-instead-of-inline.html and class-instead-of-inline.css

  5. The Cascade and the Order of Styles

    Page 198, Fig A: style.css

    Page 198, Fig B: importance-of-location.html (it also uses style.css)

    Page 199, Fig D: importance-of-location-example2.html (it also uses style.css)

  6. Using Media-Specific Style Sheets

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

    Page 201, Fig B: base-styles-plus-media-print.css (view results in base-styles-plus-media-print.html)

Back to Top

Chapter 9 Defining Selectors

  1. Selecting Elements by Name

    Pages 206-207, Figs A and B: select-by-element-name.html and name.css

  2. Selecting Elements by Class or ID

    Pages 208-209, Figs A and B: select-by-class.html and class.css

    Page 210 (third tip): select-by-class-two-classes.html and class-two-classes.css

    Page 210 (second-to-last tip): select-by-id.html and id.css

  3. Selecting Elements by Context

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

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

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

  4. Selecting an Element That Is the First or Last Child

    Page 216, Figs A and B: select-by-first-child.html and first-child-selector.css

    Page 217, Fig D: last-child.css (view results in select-by-last-child.html)

  5. Selecting the First Letter or First Line of an Element

    Page 218, Figs A and B: select-by-first-letter.html and first-letter.css

    Page 219, Fig D: first-line.css (view results in select-by-first-line.html)

  6. Selecting Links Based on Their State

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

  7. Selecting Elements Based on Attributes

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

  8. Specifying Groups of Elements

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

  9. Combining Selectors

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

Back to Top

Chapter 10 Formatting Text with Styles

Note: The majority of this chapter covers evolving the formatting of a page's text and background. The individual steps are shown after this box. The end result is:

text-final.html (it uses text-decoration.css)

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

  2. Choosing a Font Family

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

  3. Specifying Alternate Fonts

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

  4. Creating Italics

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

    Page 237 (sidebar) real-italic-vs-faux-italic.html

  5. Applying Bold Formatting

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

    Page 239, Fig D: font-weight-bold-numeric-weights.html

    Page 239, Fig E: real-bold-vs-faux-bold.html

  6. Setting the Font Size

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

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

    Page 243, Fig G: font-size-rems.css (view results in font-size-rems.html)

  7. Setting the Line Height

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

  8. Setting All Font Values at Once

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

  9. Setting the Color

    Page 248, Fig A: color.css (view results in color.html)

  10. Changing the Text's Background

    Page 250, Fig A: background-color-figa.css (view results in background-color-figa.html)

    Page 251, Fig C: background-color-figc.css (view results in background-color-figc.html)

    Page 251, Fig E: background-color-plus-padding.css (view results in background-color-plus-padding.html)

    Page 252, Fig G: background-img-repeat.css (view results in background-img-repeat.html)

    Page 253, Fig I: background-img-repeat-x-white-bg.html

    Page 253, Fig K (shown on left side of L): background-img-repeat-x-black-bg.html
    This doesn't have the rule in Fig K fthat sets html { min-height: 100%; }

    Page 253, Fig K (shown on right side of L): background-img-repeat-x-black-bg-2.html

    Page 254, Fig M: background-img-fixed.html

    Page 254, Fig O: background-img-scroll.html (the default behavior)

    Page 255, Fig P: background-img-position.css (view results in background-img-position.html)

  11. Controlling Spacing

    Page 257, Fig A: letter-spacing.css (view results in letter-spacing.html)

  12. Adding Indents

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

  13. Aligning Text

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

  14. Changing the Text Case

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

  15. Using Small Caps

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

  16. Decorating Text

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

  17. Setting White Space Properties

    Page 264, Fig A: whitespace.css and whitespace.html

Back to Top

Chapter 11 Layout with Styles

Note: The vast majority of this chapter entails evolving a single page layout for the fictitious Le Journal site. The CSS file progresses throughout the chapter, building upon the styles added in the previous pages. The end result is:

finished-page.html and lejournal.css

  1. Structuring Your Pages

    Pages 269-270, 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

    Pages 272-273, Figs A and E: html5-elements-styling.css (step 1) and html5-elements-styling.html (step 2, last paragraph)

  3. Resetting or Normalizing Default Styles

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

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

  4. Setting the Border

    Page 291, Fig K: border-styles.html

  5. Determining How to Treat Overflow

    Page 305, Fig A: overflow.html

  6. Aligning Elements Vertically

    Page 306, Figs A and C: vertical-align.html and vertical-align.css

Back to Top

Chapter 12 Building Responsive Webpages

  1. Putting It All Together

    The finished page as shown in the steps throughout section:

    Page 326-331, Figs A-K: finished-page.html and lejournal.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 example.css and styling-text-with-web-font.html evolve during the chapter, so I had to create multiple versions of them to provide you the files in their various stages.

  1. Understanding the @font-face Rule

    Page 345, Fig A: understanding-font-face.css

  2. Styling Text with a Web Font

    Page 346-347, Figs A and E: example-regular.html and example-regular.css

  3. Applying Italics and Bold with a Web Font

    Page 351, Fig F: example-regular-italic.css (you can view it in example-regular-italic.html)

    Page 353, Fig K: example-regular-italic-bold.css (you can view it in example-regular-italic-bold.html)

    Page 354-355, Figs M and P: example-regular-italic-bold-and-bolditalic.css (you can view it in example-regular-italic-bold-and-bolditalic.html)

    Page 356, Last tip and Fig R: styling-text-with-web-font.html and example.css

  4. Using Web Fonts from Google Fonts

    Page 358-359, Figs F and G: using-google-web-font.html and style.css

Back to Top

Chapter 14 Enhancements with CSS3

  1. Rounding the Corners of Elements

    Page 365, Figs A and B: rounded-corners.html and rounded-corners.css

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

  2. Adding Drop Shadows to Text

    Page 368, Figs A and B: text-shadow.html and text-shadow.css

  3. Adding Drop Shadows to Other Elements

    Page 370, Figs A, B and D: box-shadow.html and box-shadow.css

  4. Applying Multiple Backgrounds

    Page 373, Figs A and B: multiple-backgrounds.html and multiple-backgrounds.css

    Page 375, Fig E: multiple-backgrounds-shorthand.css (view results in multiple-backgrounds-shorthand.html)

  5. Using Gradient Backgrounds

    Page 376-379, Figs A-I: gradients.html and gradients.css

  6. Setting the Opacity of Elements

    Page 382, Fig A: opacity-default.html (it also uses opacity-default.css)

    Page 382, Fig C: opacity-example-2.css (view results in opacity-example-2.html)

    Page 383, Fig E: opacity-example-3.html and opacity-example-3.css

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

  7. Effects with Generated Content

    Page 384, Fig A: generated-content-without.html

    Page 384, Fig C: generated-content-arrows.html

    Page 384-385, Figs E and F: generated-content-bubble-triangle.html and generated-content-bubble-triangle.css

  8. Combining Images with Sprites

    Page 387, Fig A: sprite-without.html (it uses sprite-without.css)

    Pages 388, Fig C: sprite.css (it uses the same HTML as in Fig A: sprite.html)

Back to Top

Chapter 15 Lists

  1. Creating Ordered and Unordered Lists

    Page 390, Fig A: ordered-list.html

    Page 391, Fig C: unordered-list.html

    Page 391-392, Figs E and F: unordered-list-spacing.html and unordered-list-spacing.css

  2. Choosing Your Markers

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

  3. Using Custom Markers

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

    Page 395, Fig D: using-custom-markers-step2.html and using-custom-markers-step2.css

    Page 396, Fig F: using-custom-markers-step3.html and using-custom-markers-step3.css

  4. Choosing Where to Start List Numbering

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

  5. Controlling Where Markers Hang

    Page 398, Fig A: controlling-where-markers-hang-default.html

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

  6. Setting All List-Style Properties at Once

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

  7. Styling Nested Lists

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

    Extra Example—how to style with classes instead (per second tip on page 401):
    nested-lists-with-classes.html and nested-lists-with-classes.css

  8. Creating Description Lists

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

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

    Page 406-407, Figs G and H: description-list-nested.html and description-list-nested.css

Back to Top

Chapter 16 Forms

  1. Creating Forms

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

    Page 414, Fig B: form.css

  2. Processing Forms

    Extra (referenced on Page 416, Fig A): show-data.txt

    NOTE: This sample PHP script collects the information submitted with form.html and displays it in your browser. You will need to change the name of this file to show-data.php and put the file on a web server for it to work. Open this file in your text editor and read the comment that begins with "TO TEST THIS SCRIPT" for additional important instructions. You may also view that comment in your browser by activating the link to show-data.txt directly above this note.

    Extra (referenced on Page 416, Fig A): email-data.txt

    NOTE: This sample PHP script collects the information submitted with the form and emails it to the email addresses you specify in the script. You will need to change the name of this file to email-data.php and put it on a web server for it to work. Open this file in your text editor and read the comment that begins with "TO TEST THIS SCRIPT" for additional important instructions. You may also view that comment in your browser by activating the link to email-data.txt directly above this note.

  3. Disabling Form Elements

    Page 444, Fig A: disabled.html

    Page 445, first tip: toggle-textarea.js (disabled.html uses it)

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, because they don't support those HTML5 elements.) See "The HTML5 Shiv" in Chapter 11 (p.273) for details, or see http://code.google.com/p/html5shiv/.

  1. Adding a Single Video to Your Webpage

    Page 452, Fig A: webm-video.html

    Page 452, Fig C: webm-video-with-dimensions.html

  2. Adding Controls and Autoplay to Your Video

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

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

  3. Looping a Video and Specifying a Poster Image

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

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

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

  4. Preventing a Video from Preloading

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

    Page 458, sidebar: webm-video-with-preload-metadata.html

  5. Using Video with Multiple Sources and a Text Fallback

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

  6. Adding an Audio File with Controls to Your Webpage

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

  7. Autoplaying, Looping, and Preloading Audio

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

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

    Page 466, Fig D: ogg-audio-with-preload-metadata.html

    Extra: ogg-audio-with-preload-none.html

  8. Providing Multiple Audio Sources with a Fallback

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

  9. Adding Video and Audio with a Flash Fallback

    Page 471, Fig D: video-audio-flash-fallback-add-file-to-head.html

    Page 472, Fig F: video-flash-fallback.html

    Page 473, Fig H: audio-flash-fallback.html

    Page 473, Fig J: video-and-audio-flash-fallback.html

Back to Top

Chapter 18 Tables

  1. Structuring Tables

    Page 478, Fig A: table.html

    Page 479, Fig C: table-evolved.html

    Page 479-480, Figs C and E: table-evolved-and-styled.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 482, 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 487, 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 487, Fig B: load-in-head.html

    Page 488, Fig C: js/sample-script.js (nearly identical to toggle-textarea.js in Chapter 16)

    Page 489, Fig D: js/sample-script.min.js

  2. Adding an Embedded Script

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

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

Back to Top

Chapter 20 Testing & Debugging Web Pages

  1. Validating Your Code

    HTML5 Validator

    W3C HTML Validator (including HTML5)

    W3C CSS Validator

    Page 496-497, Fig A and C: h1-error.html

    Extra (as shown in Fig E): h1-fixed.html

  2. Testing Your Pages

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

  3. When Images Don't Display

    Page 510, Fig A: image-does-not-display.html

    Extra: image-displays.html

Back to Top