Designing with (X)HTML

Sharaf Atakhanov

JPRA357: Publishing to the Web

Quick Summary of (X)HTML

• XML + HTML = XHTML
• Successor to HTML 4.0 using CSS
• CSS — used to style page elements and layout
• CSS is XML based language
• Web Standards — Separation of structure, presentation and behavior
• XHTML Flavors — Strict, Frameset, and Transitional (specify using DOCTYPE)

XHTML DOCTYPE

Source: http://www.cookwood.com/html/extras/doctypes.html

XHTML Structure

Source: http://www.cookwood.com/html5ed/examples/blocks/blueflax.html

Content Structure within XHTML

Meet the Tags

More Tags

Naming Elements

Unique Elements

• <div id="name"></div> for a group of elements
• <span id="name"></span> for a span of text or inline elements
• Each id must be unique
• Creates an anchor within the page

Groups of Elements

• <div class="name"></div>
• <span class="name"></span>

Examples

• http://www.cookwood.com/html5ed/examples/foundation/div.html
• http://www.cookwood.com/html5ed/examples/foundation/span.html
• http://www.cookwood.com/html5ed/examples/foundation/headers.html

Extras

• <del></del>
• <pre>
• <br />
• <!-- comments -->
• <blockquote>
• 
• 
• <abbr title="text"></abbr>
• <acronym>

Sources & References

• Designing with Web Standards, Jeffrey Zeldman, New Riders Publishing, May 2003
• HTML for the World Wide Web, by Elizabeth Castro, Peachpit Press 2003