List of Figures

---

Chapter 1: Introduction to HTML and XHTML

Figure 1-1: Interpretation of Web page with HTML markup

Figure 1-2: Raw HTML mistakenly displayed in browser window

Figure 1-3: An HTML page displayed in a browser

Figure 1-4: Problem with <title> under Netscape Navigator

Chapter 2: Web Development Overview

Figure 2-1: The Waterfall Model

Figure 2-2: Typical site organization diagram

Figure 2-3: Sample wireframe

Figure 2-4: Paper comp for Demo Company site home page

Figure 2-5: Digital composite for Demo Company site home page

Figure 2-6: Subpage paper composite for Demo Company

Figure 2-7: E-commerce paper composite

Figure 2-8: Slicing comps to build a template

Figure 2-9: WYSIWYG editing versus direct HTML/XHTML editing

Figure 2-10: WYSIWYG editors do not always offer an accurate visual representation

Figure 2-11: Validation catches HTML errors

Figure 2-12: Crunch HTML/XHTML for delivery

Chapter 3: Core Elements

Figure 3-1: Rendering ofheading styleexample

Figure 3-2: Rendering of the paragraph example

Figure 3-3: Rendering of break and paragraph example

Figure 3-4: Example rendering of <div> and <center>

Figure 3-5: Rendering of quotations example

Figure 3-6: Rendering of preformatted and regular text

Figure 3-7: Rendering of ordered list example

Figure 3-8: Rendering of unordered list example

Figure 3-9: Rendering of definition list example

Figure 3-10: Example of lists for presentation

Figure 3-11: Rendering of horizontal rule example

Figure 3-12: Rendering of physical text formatting elements

Figure 3-13: Rendering of logical text formation under Mozilla, Internet Explorer, and Opera

Figure 3-14: Rendering of Insert-Delete example

Figure 3-15: Rendering of character entities example

Chapter 4: Links and Addressing

Figure 4-1: Example rendering and link feedback in various browsers

Figure 4-2: Sample file tree

Figure 4-3: Browser renderings of combined linked example

Figure 4-4: Ticks-a common problem with image links

Figure 4-5: Server-side image feedback

Figure 4-6: Image mapping made easy in an editor

Figure 4-7: Rendering of client-side image-map

Figure 4-8: Non-meaningful image map renderings

Figure 4-9: Image map with secondary text navigation

Figure 4-10: Browser support for <link> rendering

Chapter 5: Images

Figure 5-1: GIF compression scheme comparison

Figure 5-2: Color Reduction is useful to reduce GIF file size .

Figure 5-3: Interlaced GIF images show the gist of an image quickly

Figure 5-4: Animated GIFs provide only basic animation controls.

Figure 5-5: Example of animated GIF frames and optimization

Figure 5-6: JPEG file size and quality comparison

Figure 5-7: Comparison of GIF and JPEG files

Figure 5-8: PNG Compression vs. GIF Compression

Figure 5-9: Different Gamma values can cause images to look different

Figure 5-10: Rendering of a simple <img> example

Figure 5-11: Image alignment rendering

Figure 5-12: Image alignment rendering

Figure 5-13: Rendering of hspace and vspace example

Figure 5-14: Image with misaligned caption

Figure 5-15: Rendering of <br clear> example

Figure 5-16: Image as link feedback

Chapter 6: Text, Colors, and Backgrounds

Figure 6-1: Text indentation using <blockquote>

Figure 6-2: The <multicol> tag under Internet Explorer and Netscape 4. x

Figure 6-3: <font> demonstration

Figure 6-4: Example page using Microsoft's WebDings font

Figure 6-5: Embedded fonts increase design choices.

Figure 6-6: Repeating background image

Figure 6-7: Background tiles without visible seam

Figure 6-8: Sidebar layout using background tile (horizontal GIF)

Figure 6-9: Layout using background tile (vertical GIF)

Chapter 7: Tables and Layout

Figure 7-1: Browser renderings of a simple example

Figure 7-2: Rendering of rowspan and colspan

Figure 7-3: Advanced table hints at layout possibilities

Figure 7-4: Rendering of two-column layout

Figure 7-5: Centered page using a table

Figure 7-6: Centered layout variation

Figure 7-7: TLB template example

Figure 7-8: Stretchable design in action

Figure 7-9: Rendering of layout with " jigsaw "

Figure 7-10: Slicing visual composite to make a template

Figure 7-11: Databinding example under Internet Explorer

Chapter 8: Frames

Figure 8-1: Example frame interface

Figure 8-2: Simple two-frame example in Internet Explorer

Figure 8-3: Legacy browsers might lack support for frames.

Figure 8-4: Frames within frames problem

Figure 8-5: Nested frame design

Figure 8-6: Fixed window frame design

Figure 8-7: Rendering of <iframe> example

Chapter 9: Multimedia

Figure 9-1: RealAudio's RealPlayer

Figure 9-2: Rendering of the <marquee> example under Internet Explorer

Figure 9-3: Sample Acrobat document

Chapter 10: CSS1

Figure 10-1: CSS versus no CSS rendering

Figure 10-2: Pseudo-elements vary their application

Figure 10-3: Simple document parse tree

Figure 10-4: Browser renderings of the CSS example

Figure 10-5: Rendering of font example under Internet Explorer

Figure 10-6: Rendering of text properties under Mozilla

Figure 10-7: List properties under Internet Explorer 5

Figure 10-8: Rendering of background properties

Figure 10-9: Margin example under Internet Explorer

Figure 10-10: CSS border properties rendering

Figure 10-11: Rendering of padding example

Figure 10-12: Height and width set and unset

Chapter 11: CSS2

Figure 11-1: Rendering of positioned objects under Internet Explorer

Figure 11-2: Rendering of z-index example

Figure 11-3: Drastic look changes per style sheet

Chapter 12: Forms

Figure 12-1: Form interaction interview

Figure 12-2: Text field rendering under Netscape

Figure 12-3: Rendering of <textarea> example under Internet Explorer

Figure 12-4: Using hidden form fields to preserve state

Figure 12-5: File form control rendering with browser dialog box

Figure 12-6: < fieldset > and <legend> rendering under Internet Explorer

Figure 12-7: Example of a poorly laid-out form

Figure 12-8: Form layout improved with a table

Figure 12-9: Using a CSS to indicate field focus

Chapter 13: Introduction to Server-Side Programming

Figure 13-1: Sample MIME mapping dialog box under Netscape

Figure 13-2: Output of simple CGI program

Figure 13-3: CGI environment variables example

Figure 13-4: Overview of parsed HTML solutions

Figure 13-5: ColdFusion output under Netscape

Chapter 14: JavaScript and DHTML

Figure 14-1: JavaScript says hello

Figure 14-2: VBScript says hello

Figure 14-3: Parse tree for example HTML

Figure 14-4: Object model for Netscape 3 and Internet Explorer 3 browsers

Figure 14-5: Expanded object model for 4.x generation browsers

Chapter 15: Plug-ins, ActiveX Controls, and Java Applets

Figure 15-1: About Plug-ins listing

Figure 15-2: JIM window under Netscape 4

Figure 15-3: ActiveX signed-code certificate

Figure 15-4: Rendering of ActiveX control under Internet Explorer and Mozilla

Figure 15-5: Java example under Netscape 4 with Java turned on and off

Figure 15-6: <object> for file inclusion in Internet Explorer and Mozilla

Chapter 16: HTTP and Site Delivery

Figure 16-1: User does not see components affecting Web site delivery speed

Figure 16-2: Hosting choices overview

Figure 16-3: Web server operation overview

Chapter 17: Site Management

Figure 17-1: PICS rating support under Internet Explorer

Figure 17-2: Overview of search engines

Figure 17-3: Custom 404 pages can fit with a site design.

Figure 17-4: 'Page Moved' example page

Figure 17-5: Demo Company's content management system

Figure 17-6: Three Web servers are better than one

Chapter 18: XML

Figure 18-1: Well- formed XML under Internet Explorer

Figure 18-2: Documents that aren't well-formed won't render

Figure 18-3: Validation error message

Figure 18-4: Internet Explorer supports basic XSL

Figure 18-5: XML document transformed to HTML tables using XSL

Figure 18-6: Direct display of XML documents with CSS

Figure 18-7: XHTML with MathML and SVG under Mozilla

Figure 18-8: With IE's data-binding you can output structured data easily

Figure 18-9: Hello WML World in Nokia Simulator

Appendix D: Fonts

Figure D-1:    Font families available for Microsoft browsers and systems

Figure D-2:    Font families available with Macintosh System 7

Figure D-3:    Additional font families available with Macintosh System 8

Figure D-4:    Additional font families available with Macintosh System 8.5

Figure D-5:    Additional fonts for Apple Macintosh OS X

Figure D-6:    Font families available on common UNIX systems

Figure D-7:    Embedded fonts increase design choices

---