22
XHTML Basics I450 Technology Seminar Copyright 2003, Matt Hottell
| Date post: | 29-Dec-2015 |
| Category: |
Documents |
| Upload: | shawn-johnston |
| View: | 215 times |
| Download: | 0 times |
XHTML Basics
I450 Technology SeminarCopyright 2003, Matt Hottell
HTML
Developed in 1991 by Tim Berners-Lee in Switzerland for CERN
HTML
Developed in 1991 by Tim Berners-Lee in Switzerland for CERN
Originally designed for marking up and displaying scientific text
HTML Issues
Browser war bloating
HTML Issues
Browser war bloating
Does not separate visual markup from logical markup
Logical markup
Markup that explains what the tagged data is or what role it plays in the document
Logical markup
Markup that explains what the tagged data is or what role it plays in the document
<h1> <title> <table> <blockquote>
Visual markup
Markup that only determines how the tagged data is to be displayed
Visual markup
Markup that only determines how the tagged data is to be displayed
<em> <b> <font> <center>
HTML<HTML><head><title>My Page</title><BODY><p><b><em>My favorite foods:</b></em><ul><li>Pizza<li>Ice Cream<li>Tortas</li></ul><p><table><tr><td>My pictures:<td><img src=“mypic.jpg” height=200 width=200></table></html>
Why XHTML?
Separates logical from visual markup Move all visual markup into a separate
style sheet Follows XML standards Is backwards-compatible with HTML Compatible with new types of displays
Cell phones, kiosks, PDAs, etc.
XHTML Basics
XHTML can be seen as a subset of logical HTML elements.
3 different XHTML subsets: Frameset, transitional, strict
XHTML Basics
Must follow XML rules:
Must be “well-formed” or syntactically correct according to a document standard
For XHTML, this document standard is the World Wide Web Consortium XHTML standard which can be found at http://www.w3.org/TR/xhtml1/
XHTML Basics
Must follow XML rules: All elements must be properly nestedBad:<span><a href=‘mypage’>HI!</span></a>Good:<span><a href=‘mypage’>HI!</a></span> Some elements can contain other
elements, others cannot.
XHTML Basics
Must follow XML rules: All tags must be properly terminatedBad:<ul><li>One<li>Two<li>Three</ul>Good:<ul><li>One</li><li>Two</li><li>Three</li></ul>
<br> becomes <br />
XHTML Basics
Must follow XML rules: All tags must be lower-case
XHTML Basics
White space: Do not leave trailing spaces Separate attributes by one space
Bad:<table class=‘picframe’width=‘100’ ></table
>Good:<table class=‘picframe’ width=‘100’></table>
XHTML Basics Attributes
Must be enclosed in quotes<img src=“mypicture.jpg” height=‘100’ />
Name attribute replaced by id<table name=‘pictable’ id=‘pictable’ >
No standalone attributes<option checked=“checked” />
Images require alt attributes.<img src=‘mypic.jpg’ alt=‘Me!’ />
XHTML Basics
Must validate against a document model that is declared at the beginning of the XHTML document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML Skeleton<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /><title>Untitled Document</title></head><body></body></html>
HTML<HTML><head><title>My Page</title><BODY><p><b><em>My favorite foods:</b></em><ul><li>Pizza<li>Ice Cream<li>Tortas</li></ul><p><table><tr><td>My pictures:<td><img src=“mypic.jpg” height=200 width=200></table></html>
XHTML Conversion<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body><p><b><em>My favorite foods:</em></b><ul><li>Pizza</li><li>Ice Cream</li><li>Tortas</li></ul></p><p><table><tr><td>My pictures:</td><td><img src=“mypic.jpg” height=‘200’ width=‘200’ alt=‘My
Picture!’ /></td></tr></table></p></body></html>
