Examples Found in the Book
Chapter 1: So What's All This Web Jazz?
Chapter 2: Building Your First Web Page: HTML Basics
2-1 The file not-yet.html, without any HTML
2-2 Paragraph breaks in not-yet.html
2-3 The break tag in not-yet.html
2-4 Format is correct, but the typeface is wrong.
2-4a added <head> and <body>
2-11 The <title> tag produces an appropriate title for the browser window
2-12 <blockquote> information added to the Web page
2-13 Examples of <h1> and <h2> headings
2-14 Larger titles and smaller descriptive text demonstrate the value of different header levels
2-15 Using horizontal rules to help divide your Web pages into easy-to-read sections
Chapter 3: Presenting Text Attractively
2-2 Paragraph breaks in not-yet.html
2-3 The break tag in not-yet.html
2-4 Format is correct, but the typeface is wrong.
2-4a added <head> and <body>
2-11 The <title> tag produces an appropriate title for the browser window
2-12 <blockquote> information added to the Web page
2-13 Examples of <h1> and <h2> headings
2-14 Larger titles and smaller descriptive text demonstrate the value of different header levels
2-15 Using horizontal rules to help divide your Web pages into easy-to-read sections
3-1 An example of boldface, italics, and a coding mistake
3-2 Underlines on a Web page: Links or simply underlined text?
3-3 <b> and <tt> together produce bold monospace.
3-4 Superscript and subscript format tags at work
3-5 Using the <strike> tag to show changed text on-screen
3-6 You can make your text fun and interesting by using the font tag attributes to specify a variety of colors and sizes
3-7 An example of logical styles in HTML
3-8 A complex and attractive document
Chapter 4: Moving into the 21st Century with Cascading Style Sheets3-2 Underlines on a Web page: Links or simply underlined text?
3-3 <b> and <tt> together produce bold monospace.
3-4 Superscript and subscript format tags at work
3-5 Using the <strike> tag to show changed text on-screen
3-6 You can make your text fun and interesting by using the font tag attributes to specify a variety of colors and sizes
3-7 An example of logical styles in HTML
3-8 A complex and attractive document
TIP: You can read this chapter online!
4-1 Rudimentary style sheets aren't too thrilling. Yet.
4-2 Classes let you organize your data presentation
4-3 Same HTML page, different style specification
4-4 Subclasses and special selectors allow very specific control over styles
4-5 Adding color, font-style, and font-family makes an interesting page.
4-6 Small-caps and letter-spacing offer interesting type variants
4-7 Word and line spacing can dramatically change the way text looks on a page
4-8 The Travels with Tintin screen shot from Chapter 3 has been enhanced with the CSS styles presented throughout this chapter
Chapter 5: Lists and Special Characters
4-2 Classes let you organize your data presentation
4-3 Same HTML page, different style specification
4-4 Subclasses and special selectors allow very specific control over styles
4-5 Adding color, font-style, and font-family makes an interesting page.
4-6 Small-caps and letter-spacing offer interesting type variants
4-7 Word and line spacing can dramatically change the way text looks on a page
4-8 The Travels with Tintin screen shot from Chapter 3 has been enhanced with the CSS styles presented throughout this chapter
5-1 A glossary, formatted as a definition list, in HTML
5-2 A definition list of medicinal herbs with some additional formatting
5-2a variation on 5-2: CSS list styles added
5-3 A bulleted list
5-4 A nested list using bold, indenting, and varied font sizes
5-5 An example showing manually inserted numbered steps along with unordered lists.
5-6 An example of automatic numbering using the ordered list style and indents
5-7 An outline using special <ol> attributes to display varied types of numbers and letters
5-8 Geometric ramblings - showing off various ways you can fine-tune the presentation of list elements
5-9 Specifying a bullet graphic with list-style-image
5-10 Examples of entity references you can use to present special characters on your Web pages
5-11 Comments galore, but none displayed
Chapter 6: Putting the Web in World Wide Web: Adding Pointers and Links
5-2 A definition list of medicinal herbs with some additional formatting
5-2a variation on 5-2: CSS list styles added
5-3 A bulleted list
5-4 A nested list using bold, indenting, and varied font sizes
5-5 An example showing manually inserted numbered steps along with unordered lists.
5-6 An example of automatic numbering using the ordered list style and indents
5-7 An outline using special <ol> attributes to display varied types of numbers and letters
5-8 Geometric ramblings - showing off various ways you can fine-tune the presentation of list elements
5-9 Specifying a bullet graphic with list-style-image
5-10 Examples of entity references you can use to present special characters on your Web pages
5-11 Comments galore, but none displayed
6-1 Government sites with their accompanying URL links
6-2 The list of government Web sites, expanded to include several that don't reference other Web pages
6-3 The opening page of Dave's Online Deli, with the links to other pages available
6-5 The lentil soup page
6-6 Some design guidelines coded with named anchors although you can't tell that from this output
6-7 A quick jump list on top that uses links to named anchors
6-8 Design commentary with reference links
6-9 Anchors and jump points can help you navigate the Jazz Institute phone book
Chapter 7: From Dull to Cool by Adding Graphics
6-2 The list of government Web sites, expanded to include several that don't reference other Web pages
6-3 The opening page of Dave's Online Deli, with the links to other pages available
6-5 The lentil soup page
6-6 Some design guidelines coded with named anchors although you can't tell that from this output
6-7 A quick jump list on top that uses links to named anchors
6-8 Design commentary with reference links
6-9 Anchors and jump points can help you navigate the Jazz Institute phone book
7-1 The Black Box page with graphics specified, but not loaded
7-2 The Black Box Web page with fully loaded graphic
7-3 The improved Black Box page displays the added graphics
7-4 The Black Box looks much different in Lynx's text-only display
(which you'll only see if you view this link in a text-only browser, needless to say!)
7-5 Top, middle and bottom image alignment options
7-6 Aligning graphics to the left and right makes text more presentable
7-7 A Tic-Tac-Toe game created using the border attribute
7-8 You can use the hspace attribute to adjust the space between text and an image
7-9 The Align and Clear attributes at work
7-10 Exploring background colors and graphics
7-11 Scanned image of Sacré Coeur
7-11a variation on 7-11
7-12 Sacré Couer as line art, after scanning and some manipulation
7-14 Photograph from digital camera included on Web Page
(you can see more of my photographic portfolio if you're interested, at portfolio.intuitive.com)
7-16 Transparent graphics can add a cool element to your icons by letting the page's background bleed through the edges of the image
7-20 A completed image map offers region-to-URL mapping
Chapter 8: Tables and Frames
7-2 The Black Box Web page with fully loaded graphic
7-3 The improved Black Box page displays the added graphics
7-4 The Black Box looks much different in Lynx's text-only display
(which you'll only see if you view this link in a text-only browser, needless to say!)
7-5 Top, middle and bottom image alignment options
7-6 Aligning graphics to the left and right makes text more presentable
7-7 A Tic-Tac-Toe game created using the border attribute
7-8 You can use the hspace attribute to adjust the space between text and an image
7-9 The Align and Clear attributes at work
7-10 Exploring background colors and graphics
7-11 Scanned image of Sacré Coeur
7-11a variation on 7-11
7-12 Sacré Couer as line art, after scanning and some manipulation
7-14 Photograph from digital camera included on Web Page
(you can see more of my photographic portfolio if you're interested, at portfolio.intuitive.com)
7-16 Transparent graphics can add a cool element to your icons by letting the page's background bleed through the edges of the image
7-20 A completed image map offers region-to-URL mapping
8-1 The simplest table possible - all data in a single row
8-2 Another simple table, but with each element on its own line
8-3 Adding some width improves the look of the table
8-4 A comparison of the cellpadding and cellspacing parameters
8-5 Using the <th> tag to add table headers
8-6 The colspan attribute enables you to add headers that span more than one column
8-7 Table cells colored by using both CSS and the <td> tag
8-8 The rowspan attribute demonstrated
8-9 Table-edge colors specified for a different appearance: this capability is only available in Internet Explorer
8-10 A sample table that uses the frame and rules attributes
8-11 OurEcoPass Contact Us page, showing a table within a table
(you can visit the site by going to OurEcoPass.org)
8-12 A nifty table-based page layout
8-13 How big is this table? It can be hard to compute when the layout is sufficiently complex
8-14 The colspan and col tags define table attributes
8-15 Organizing a table with thead and tbody doesn't affect appearance
8-16 The align="justify" attribute justifies text when it is used within the <p> tag, but not when used within a table data cell
8-17 A simple two-pane frame page
8-18 Lots of pains, er, panes, specified within a frameset
8-19 Navigational panes offer flexibility in layout and presentation
8-20 Navigational panes with an added scroll bar
8-21 The same Web Page, different frame margin settings
8-21a variation on 8-21
8-22 An inline frame
(tip: to get this to pop up scrollbars, you might need to shrink your browser window)
Chapter 9: Forms, User Input and the Common Gateway Interface
8-2 Another simple table, but with each element on its own line
8-3 Adding some width improves the look of the table
8-4 A comparison of the cellpadding and cellspacing parameters
8-5 Using the <th> tag to add table headers
8-6 The colspan attribute enables you to add headers that span more than one column
8-7 Table cells colored by using both CSS and the <td> tag
8-8 The rowspan attribute demonstrated
8-9 Table-edge colors specified for a different appearance: this capability is only available in Internet Explorer
8-10 A sample table that uses the frame and rules attributes
8-11 OurEcoPass Contact Us page, showing a table within a table
(you can visit the site by going to OurEcoPass.org)
8-12 A nifty table-based page layout
8-13 How big is this table? It can be hard to compute when the layout is sufficiently complex
8-14 The colspan and col tags define table attributes
8-15 Organizing a table with thead and tbody doesn't affect appearance
8-16 The align="justify" attribute justifies text when it is used within the <p> tag, but not when used within a table data cell
8-17 A simple two-pane frame page
8-18 Lots of pains, er, panes, specified within a frameset
8-19 Navigational panes offer flexibility in layout and presentation
8-20 Navigational panes with an added scroll bar
8-21 The same Web Page, different frame margin settings
8-21a variation on 8-21
8-22 An inline frame
(tip: to get this to pop up scrollbars, you might need to shrink your browser window)
9-1 A simple input form
9-2 A more complex form that incorporates radio buttons and a drop-down list
9-3 Multiple select options in a small scrolling window
9-4 The school contact form showing several tags and attributes in action
9-5 The improved school contact form using a table structure
9-6 My personal Google search
9-7 My personal Google search box.
9-8 The local time on the server via a CGI script
9-9 My CGI environment for writing scripts
9-x extra example from Chapter 9
Chapter 10: Advanced Form Design
9-2 A more complex form that incorporates radio buttons and a drop-down list
9-3 Multiple select options in a small scrolling window
9-4 The school contact form showing several tags and attributes in action
9-5 The improved school contact form using a table structure
9-6 My personal Google search
9-7 My personal Google search box.
9-8 The local time on the server via a CGI script
9-9 My CGI environment for writing scripts
9-x extra example from Chapter 9
10-1 Open window and Close window buttons and a Learn About
Starbucks hypertext reference appear
10-3 By including the label tag, clicking the text next to the check box causes the box to be checked
10-3a variation on 10-3: View Source to see what's changed
10-4 An attractive forms layout that doesn't use fieldsets
10-5 Legends help organize the requested information.
10-6 Trying the tabindex-enabled form
10-7 The disabled and readonly attributes
Chapter 11: Activating Your Pages with JavaScript
10-3 By including the label tag, clicking the text next to the check box causes the box to be checked
10-3a variation on 10-3: View Source to see what's changed
10-4 An attractive forms layout that doesn't use fieldsets
10-5 Legends help organize the requested information.
10-6 Trying the tabindex-enabled form
10-7 The disabled and readonly attributes
11-1 Using JavaScript to welcome visitors by browser name
11-2 A demonstration of rollover graphics, courtesy of Crew Tags
11-3 Your Web pages can show up-to-the-second time of day
11-4 An Alert Box shows what's in the search box
11-5 No search pattern is specified, so flag it!
11-6 You can use JavaScript to add a temperature conversion calculator to your Web page
(using a very similar idea, see the debt calculator on the home page of RealLifeDebt.com too)
Chapter 12: Advanced Cascading Style Sheets
11-2 A demonstration of rollover graphics, courtesy of Crew Tags
11-3 Your Web pages can show up-to-the-second time of day
11-4 An Alert Box shows what's in the search box
11-5 No search pattern is specified, so flag it!
11-6 You can use JavaScript to add a temperature conversion calculator to your Web page
(using a very similar idea, see the debt calculator on the home page of RealLifeDebt.com too)
12-2 Margin spacing dramatically changes the appearance of text.
Compare the margins surrounding each paragraph
12-3 A basic body border makes the page considerably more visually interesting
12-4 The border-style attribute values produce a drastically different page
(if your Web browser supports it!)
12-5 Padding dramatically changes the feel of container borders.
12-6 Width can profoundly affect the appearance of material on a Web page.
12-7 Don't specify a height that's too small to contain the text, or the text spills out of the container
12-8 Float and container tweaks produce a delightful result.
12-9 Absolute positioning often layers containers atop each other.
12-10 Specifying a background color hides the overlapping text problem.
12-11 Relative positioning makes the container part of the regular document flow.
12-12 You still must allocate space even for hidden containers
12-13 JavaScript materializes the otherwise invisible paragraph.
12-14 The default layout with the <div> block hidden from view.
(the phrase "Stay where you are" should reveal the paragraph, and "It would be a pity to miss it" should hide it again)
12-16 Three boxes, neatly stacked atop each other.
Chapter 13: Site Development With Weblogs
12-3 A basic body border makes the page considerably more visually interesting
12-4 The border-style attribute values produce a drastically different page
(if your Web browser supports it!)
12-5 Padding dramatically changes the feel of container borders.
12-6 Width can profoundly affect the appearance of material on a Web page.
12-7 Don't specify a height that's too small to contain the text, or the text spills out of the container
12-8 Float and container tweaks produce a delightful result.
12-9 Absolute positioning often layers containers atop each other.
12-10 Specifying a background color hides the overlapping text problem.
12-11 Relative positioning makes the container part of the regular document flow.
12-12 You still must allocate space even for hidden containers
12-13 JavaScript materializes the otherwise invisible paragraph.
12-14 The default layout with the <div> block hidden from view.
(the phrase "Stay where you are" should reveal the paragraph, and "It would be a pity to miss it" should hide it again)
12-16 Three boxes, neatly stacked atop each other.
13-1 TokyoTim's Blogger site http://tokyotim.blogspot.com/
13-2 Thug #4's TypePad site http://david.typepad.com/
13-3 The Intuitive Life, a weblog using Movable Type
13-4 Dave Taylor's Booktalk, another weblog that also uses Movable Type
Chapter 14: Web Sites versus Web Pages
13-2 Thug #4's TypePad site http://david.typepad.com/
13-3 The Intuitive Life, a weblog using Movable Type
13-4 Dave Taylor's Booktalk, another weblog that also uses Movable Type
14-1 The .htaccess file forces visitors to log in before viewing the directory
14-2 Demonstration of some useful server-side includes
14-3 You can use SSI variables to display interesting information
14-4 The Inside Peek mailing list's thank you page, with header and footer files
Chapter 15: Thinking about Your Visitors and Your Site's Usability
14-2 Demonstration of some useful server-side includes
14-3 You can use SSI variables to display interesting information
14-4 The Inside Peek mailing list's thank you page, with header and footer files
15-1 The Internal Revenue Service Web Site - clean,
uncluttered and easy to read
15-2 The Social Security Administration Web Site - pretty overwhelming at first glance
15-3 The Firstgov.gov home page - complex, but with a method to the layout madness
15-4 One click in, and the Firstgov site has changed its screen layout completely
15-5 Navigational elements of my Intuitive Systems Web site
Chapter 16: Validating Your Pages and Style Sheets
15-2 The Social Security Administration Web Site - pretty overwhelming at first glance
15-3 The Firstgov.gov home page - complex, but with a method to the layout madness
15-4 One click in, and the Firstgov site has changed its screen layout completely
15-5 Navigational elements of my Intuitive Systems Web site
16-1 Asking the W3C Validator to check a test page for HTML compliance
16-3 HTML validates as correct HTML 4.01 transitional code
16-4 A few simlpe changes result in valid XHTML 1.0 transitional code
16-4b variation on Figure 16-4: this page validates properly
Chapter 17: Building Traffic and Being Found
16-3 HTML validates as correct HTML 4.01 transitional code
16-4 A few simlpe changes result in valid XHTML 1.0 transitional code
16-4b variation on Figure 16-4: this page validates properly
17-1 AnswerSquad's banner advertisements are
typical of what you might find on the Web
17-2 Google's AdWords produces simple, text-based advertisements, as illustrated in the ads at the top of this page
17-2 Google's AdWords produces simple, text-based advertisements, as illustrated in the ads at the top of this page
