Special Edition Using XHTML

An author, instructor, and designer, Molly E. Holzschlag brings her irrepressible enthusiasm to books, classrooms, and Web sites. Honored as one of the Top 25 Most Influential Women on the Web, Molly has spent an almost unprecedented decade working in the online world. She has written and contributed to more than ten books about the Internet and, in particular, the Web - most recently, Short Order HTML 4 (Que) and Special Edition Using HTML 4, 6th Ed (Que). Molly holds a B.A. in communications and writing, and a M.A. in media studies from the New School for Social Research. She is a recognized expert in web design and instruction, and writes a regular column in Web Techniques magazine.

Introduction.


Who Should Buy This Book. How This Book Is Organized. Conventions Used in This Book.

I. PREPARING TO USE XHTML.

1. Understanding XHTML 1.0.


What Is XHTML?



Adding Extensibility. Redefining XHTML as an XML Subset.



XHTML as a Transitional Language.



Moving Toward XML. Accommodating New Devices.



Standards Versus Conventions.



The Importance of Standards. Conventional Code Practices. The World Wide Web Consortium: A Closer Look.



Troubleshooting. Designing for the Real World.



XHTML and Web Developers: Real World Concerns.

2. XHTML Foundations.


Revisiting the HTML 4.0 Standard. HTML 4.0: Main Concepts.



Separate Document Formatting and Presentation. Improvement of Document Rendering. Accessibility Guidelines. Facilitate Internationalization.



Examining HTML as an XML Application.



Historical Relationships. Bridging the Gap.



Is It Too Complex and Is It Happening Too Fast?

3. XHTML in the Real World.


A Return to Clean Code. The Trouble with HTML.



Poorly Written Code. Code for Presentation, Not for Formatting. Difficulties Across Platforms and Browsers. Poor Habits Extending to Software.



Transcending Limitations on Progress.



Returning to the Well-Formed Document.

4. XHTML Tools.


Approaches to Coding.



Hand Coding Using Simple Text Editors. HTML and XHTML Editing Environments. HTML and XHTML Conversion Utilities. What-You-See-Is-What-You-Get (WYSIWYG) Applications.



Troubleshooting. Designing for the Real World.



Creating Templates for Speed and Accuracy. Company Guidelines and Checklists. Proprietary Applications.

II. XHTML SYNTAX.

5. Defining XHTML Syntax.


Syntax and Structure. Document Conformance and Document Type Definitions.



XHTML 1.0 Strict DTD. XHTML 1.0 Transitional DTD. XHTML 1.0 Frameset DTD.



Elements, Attributes, and Values.



Elements. Attributes. Values.



Special Characters. Well-Formed Code. Troubleshooting. Designing for the Real World.



Troubleshooting Your Markup.

6. Well-Formed XHTML Documents.


Understanding Rigor and Well-Formedness.



Why Rigor and Well-Formedness Matter. Complications of Incorrect Code.



Symmetry and Well-Formed Documents.



Horizontal Symmetry. Vertical Symmetry. The Container Method.



Case Sensitivity.



In HTML. In XML. In XHTML 1.0.



Attribute Quoting.



In HTML. In XML and XHTML.



Managing Elements.



Non-Empty Elements. Empty Elements.



Whitespace. Troubleshooting. Designing for the Real World.

7. Structuring XHTML Documents.


Understanding Document Structure. Document Declarations and Elements. The XHTML Document Shell.



Head Structure. Body Structure.



Building an XHTML Shell. Clarity and Orientation.



Commenting Sections in an XHTML Document.



Writing Documents for Clarity and Ease of Use. Troubleshooting. Designing for the Real World.



A Study in Coding Styles.

8. Managing XHTML Documents Locally.


The Importance of File Management. Naming Conventions.



Improperly Formed Filenames. Unclear Filenames. Filename Length. Correct Prefix and Suffix Names.



File Directory Structure. Saving Files. Troubleshooting. Designing for the Real World.



Site Mapping.

III. USING XHTML TO BUILD WEB PAGES.

9. Formatting Text in XHTML.


Formatting Elements. Exploring Text Concepts. Working with Headers. Inserting Paragraphs and Breaks.



Understanding the Paragraph Tag Approach. Working with the Break Tag. Creating Space with Breaks. Working with the Preformatted Text Tag.



Using Text Styles. Creating Special Text Formatting. Adding Color, Size, and Typefaces to Text.



Font Element Attributes. Managing Color for Backgrounds, Text, and Links.



Troubleshooting. Designing for the Real World.



Beyond Black And White.

10. Adding Lists to XHTML Documents.


Using Lists



Common List Tags. The Value of Lists.



Bulleted (Unordered) Lists. Numbered (Ordered) Lists. Building a Page with Lists. Definition Lists. Advanced List Techniques.



Nesting Lists.



Using Lists for Indenting Items. List Attributes. Troubleshooting. Designing for the Real World.



Using Lists: Dinosauria and Publisher's Weekly.

11. Aligning Text Using XHTML.


Aligning Text. Using the div Element. Using the paragraph Element to Align Text. Nesting the div Element. Troubleshooting. Designing for the Real World.

12. Linking Pages with Standard Links.


Links Are the Web's Very Essence. The anchor Element. Absolute Linking. Relative Linking. Linking Images. Intra-Page Linking. Mail Links. Using Multiple Links on a Page. Troubleshooting. Designing for the Real World.



About About.com.

13. Using Images in XHTML Documents.


Moving Toward Design. The img Element in XHTML. Image Tag Attributes.



width and height. Image Borders. Alignment. The alt Attribute. Horizontal and Vertical Space.



Floating Images. Aligning Multiple Images. Linking Images. Troubleshooting. Designing for the Real World.



Exhibiting Your Work.

14. Laying Out Tables Within XHTML Documents.


The Importance of Tables. Table Elements.



The Basic Table.



Table Attributes.



Borders. Table Width. Creating a Fixed-Width Table. Padding. Column Span. Row Span.



Table and Table Cell Alignment.



Horizontal Alignment. Vertical Alignment.



Maximizing Table Power/Minimizing Code.



Seeing the Grid.



Using Fixed and Dynamic Design.



Applying a Fixed Table Design. Working with Dynamic Table Design. Combination Fixed and Dynamic Table Design.



Nesting and Stacking Tables. Aligning Tables. Slicing Graphics for Placement in a Table. Troubleshooting. Designing for the Real World.



Design First, Then Plan the Table.

15. Working with Frames.


To Frame or Not to Frame. Understanding Frame Structure. The Frameset. Building a Framed Page. Setting frameset and frame Tag Attributes. Exploring a Frame with Margin, Resize, and Scroll Controls. Targeting Windows.



Creating a Frame Using target and name Attributes. Magic Target Names.



Working with Borderless Frames. Advanced Frame Concepts.



Combining Rows and Columns.



Working with Inline Frames (I-Frames). The noframes Tag and Accessibility. Troubleshooting. Designing for the Real World.



Building Accessible Framed Pages.

16. Working with Standard Forms.


The Importance of Forms. Using Proper Form Syntax.



Form Elements and Attributes. Controls.



Building a Form.



Adding a Text Field. Making a Check Box. Adding a Radio Button. Making a Menu List. Creating a Text Area. Providing Reset and Submit Buttons.



Troubleshooting. Designing for the Real World.



Method, Action, and Hidden Fields at Molly.Com.

17. Another Approach to XHTML Forms Using XHTML-FML.


Creating Dynamic Forms.



XHTML-FML. Extending XHTML. Exploring the Limits of Forms.



Getting Started Using XHTML-FML.



The Authoring Environment.



Creating Dynamic Forms with XHTML-FML.



A Basic Feedback Form. Additional Content Types. Submitting Forms.



Creating an Online Survey.



Working with Toggle. Adding Content.



Advanced XHTML-FML Techniques.



Real Time Calculation. “Learning” Pull-downs. Labels. Sending Content from One Element to Another.



Putting Advanced XHTML Concepts to Work: Shop in a Page.

IV. ADDING STYLE AND SCRIPTING.

18. Cascading Style Sheets and XHTML.


Style Sheets and XHTML. Style Sheet Basics.



Separating Presentation from Structure. Understanding the Cascade.



Style Sheet Syntax. Style Sheet Methods.



Inline Style. Embedded Style. Linked Style Sheets.



Inheritance. Exploring Class and Grouping.



Working with Classes. Using Grouping.



Using Style Sheets.



Applying Margins with Style. Displaying Text with CSS. Applying Font Style.



Style Sheet Evolution. Troubleshooting. Designing for the Real World.



Making Complex Style Simple.

19. Extensible Stylesheet Language (XSL).


Understanding XSL.



Formatting Objects. Transformations. XSLT Parsers.



Creating XSL Style Sheets.



Exploring XSLT Syntax. Structure of an XSL Document. Understanding XPath References.



Transforming XHTML with XSLT.



Using CSS and XSLT with XHTML. Creating Alternate Content Views.



XSLT in the Real World.



Adapting Web Pages for Specific Audiences.

20. Adding JavaScript to XHTML Documents.


Scripting and XHTML. The Power of Scripting. Understanding JavaScript.



JavaScript Placement. Objects and Operators in JavaScript. Statements and Functions in JavaScript.



JavaScript Applications.



Simple Message Box. Drop-Down Menu Navigation. Pop-Up Window. JavaScript Mouseovers. Browser Testing and Routing.



Troubleshooting. Designing for the Real World.



JavaScript and Style Sheets.

V. ADVANCED XHTML CONCEPTS AND APPLICATIONS.

21. XHTML Modularization.


The Need for Modularization. What Is XHTML Modularization? XHTML Modules.



Abstract Modules. XHTML DTD Modules.



XHTML Validation. Devices Affected by XHTML Modularization. Extending XHTML in Real Life.



XHTML Basic.



Applying XHTML Modularization.

22. Document Type Definitions in Detail.


Understanding DTDs.



What Is a DTD? The DOCTYPE tag. DTD Syntax.



Reading the XHTML DTDs.



Downloading the XHTML DTDs. Structure of the Transitional XHTML DTD. Structure Versus Semantics.



Designing for the Real World: Defining Your Own DTD.



Extending the XHTML 1.0 DTD. Defining the Tag. Using Your New DTD.

23. XHTML Basic.


What Is XHTML Basic?



Features in Use Across Appliances. Overview of What's Supported and Why. Overview of What's Not Supported and Why. Specific Modules Included in XHTML Basic.



XHTML Basic Document Structure. Designing for the Real World.



Creating and Deploying an XHTML Basic Document.

VI. VISUAL DESIGN FOR THE.

24. Effective Page Design.


Understanding Site Architecture.



Linear Sites. Hierarchical Sites. Non-Linear Sites.



User Interface Design.



Metaphor. Clarity. Consistency. Orientation.



Page Layout Techniques.



Compositing Pages. Working with Grid Systems.



Troubleshooting. Designing for the Real World.



Designing an Effective Page. Using Photoshop Layers.

25. Color Concepts.


Color Theory.



Subtractive and Additive Color. Color and the Computer Screen. Color Significance. Properties of Color.



Color Technology.



Converting RGB to Hex.



Browser Color.



The Web-Safe Palette. Using Unsafe Colors.



Designing for the Real World.



Working with the Safe Palette.

26. Working with the Computer Screen.


Resolution.



Common Resolutions.



Controlling Page Dimension.



Using Whitespace Appropriately.



Readability.



Contrast. Gamma.



Troubleshooting. Designing for the Real World.



Calibrating the Monitor to Balance Colors.

27. Web Graphic Tools and Professional Tools.


Professional Graphics Tools.



Adobe Photoshop. Adobe Illustrator. CorelDRAW. Macromedia Freehand.



Popular Design Applications.



JASC Paint Shop Pro. Ulead PhotoImpact. Microsoft PhotoDraw. Microsoft Image Composer.



Web-Specific Applications.



Adobe LiveMotion. Macromedia Fireworks. Beatware ePicture Pro.



Plug-Ins and Specialty Tools.



Alien Skin Software. Auto F/X. Kai's Power Tools.



Animated GIF Programs.



GIF Construction Set. GIF Movie Gear. Ulead GIF Animator. Microsoft GIF Animator.



Optimization Tools.



Debabelizer Pro. Ulead SmartSaver.



Stock Photography and Art.



Eyewire. Photodisc. ArtToday. Fun and Free Sites.



Troubleshooting. Designing for the Real World.



Creating a Background Graphic: Compare and Contrast. Using Photoshop. Using PhotoImpact. Using Paint Shop Pro. Photoshop. PhotoImpact. Paint Shop Pro.

28. Common Web Graphic Formats


Graphic Interchange Format (GIF). Joint Photographic Experts Group (JPEG). Portable Network Graphics (PNG). Graphic Optimization.



Adaptive Palettes. The Web (216) Palette. Optimizing a GIF.



Designing for the Real World.



Creating Transparent GIFs.

29. Creating Professional Web Graphics.


Web Graphic Technology. Using Images on Your Pages. Scanning Techniques and Stock Art.



Scanning Images. Selecting Stock Art.



Creating Background Images.



Wallpaper Patterns. Margin Tiles.



Header Graphics.



Building a Splash Design. Bars and Rules.



Spot Art. Photographic Techniques. Splicing Graphics. Troubleshooting. Designing for the Real World.



A Professional's Approach to Designing the Web: Interview with Designer Amy Burnham

30. Designing Specialty Graphics.


Exploring Specialty Graphics. Imagemaps.



Imagemapping Tools. Methods. Application.



Animated GIFs.



Tools. Methods.



Advertising Banners.



Size Conventions. General Recommendations.



Troubleshooting. Designing for the Real World.



Do Ad Banners Work?

VII. MULTIMEDIA AND EMBEDDED OBJECTS.

31. Audio and Video.


Audio and Video on the Web. Creating Audio and Video Files.



Audio Files. Video Files.



Downloadable File Formats.



Audio Formats.



Adding Audio and Video to a Web Page. Audio and Video Plug-Ins. Designing for the Real World.



Bandwidth Blues.

32. Streaming Multimedia.


Streaming Media Concepts.



Streaming Audio. Streaming Video.



Producing Streaming Media.



Creating a Streaming Audio File. Working with Streaming Video.



Incorporating Streaming Media into Your Page.



Adding Streaming Media Using RealServer G2. Adding Streaming Media to a Page with HTTP.



Troubleshooting. Designing for the Real World.



Exploring Streaming Options.

33. Multimedia Packages.


Multimedia and the Web. Macromedia Director, Shockwave, and Flash Basics. Exploring Flash in Detail. Working with Flash.



Creating a Flash Animation. Publishing with Flash. Publishing with Aftershock.



Troubleshooting. Designing for the Real World.



Austin Powers Is Shocking!

VIII. CREATING CONTENT FOR ALTERNATIVE DEVICES.

34. Overview of Alternative Devices, Languages, and Protocols.


Types of Alternative Devices.



Operating Systems for Alternative Devices. PDAs. Mobile Computers. Smart Pagers and Phones. Set-Top Boxes. eBooks.



Alternative Device Languages.



XHTML and XML. XSL/XSLT. WML. HDML. Web Clippings.



Wireless Protocols.



WAP. CC/PP.

35. Developing for the Alternative Device.


Alternative Device Design.



Demystifying Future Delivery Systems. Understanding Alternative Environments. Alternative Device Design Tips. Back to the Future.



Designing for WebTV.



Why WebTV? Designing for WebTV.



Web Clippings.



What You Need. Web Clippings General Design Guidelines. Supported Markup.



Designing for the Real World.



Creating a Web Clipping.

36. Pagers, Cell Phones, and Other Wireless Devices.


The Wireless World. Wireless Application Protocol (WAP) Overview. Exploring WML.



All Hands on Deck. WML Document Structure. Content and Navigation.

IX. XML and Related Technologies Overview.

37. Toward XML.


Making All Things Possible with XML. Understanding the Relationship Between SGML, XML, and XHTML.



SGML. XHTML.



XML in Theory and Practice. Practical Examples of XML.



XML Tag Order.



Understanding XML Structure.



Getting Technical with XML.



Describing New Vocabularies with XML.



Understanding Document Type Definition Advantages. Coping with Document Type Definition Disadvantages.



Is XML Just HTML All Over Again? Starting with XML. Defining the XML Document as a Whole. Understanding the Well-Formedness Constraints. The Prolog: The XML Declaration.



Character Encodings. Other Encodings. Standalone Documents.



Constructing the XML Document Prolog: The Document Type Declaration. Constructing the Document Body.



Character Data. Markup.



Understanding How XML Forms Logical Structures.



How XML Forms Physical Structures. Start Tags and End Tags. Normalization. Element Types. Attribute Lists and Types. Unparsed Entities. Real-World Applications.



Getting Down to Cases.

38. Synchronized Multimedia Integration Language (SMIL).


SMIL Is an XML-Based Language. Basic SMIL Code Guidelines. SMIL History. Building a SMIL Document.



SMIL Document Tags. Using the Region Tag With Absolute and Relative Positioning. Using the Region Tag with the fit Attribute. The img Tag with the Region Attribute. Controlling When the Image Appears. Image Duration and Order. Presenting Two Images at the Same Time. Using the switch Tag to Meet User Needs.



Tools for Creating and Playing SMIL Documents.



RealNetworks Embraces SMIL. Apple QuickTime 4.1 Adds SMIL.



Designing for the Real World.



Become a Better Artist with SMIL.

39. Scalable Vector Graphics (SVG).


Scalable Vector Graphics (SVG).



SVG Concepts. SVG Software and Browsers.



Designing for the Real World.



Creating a Graphic Using SVG.

Appendix A. XHTML Reference.


Data Types: XHTML 1.0 Versions and Specifications. Alphabetical XHTML 1.0 Element Listing.