xhtml the basics a brief history of html sgml (standard generalized markup language) then came html...
TRANSCRIPT
XHTMLThe Basics
A brief history ofHTML
• SGML (Standard Generalized Markup Language) • Then came HTML• Followed by the browser…and the great browser
wars– IE– Netscape– Opera– Mozilla– Still others have come and gone
Abandoning theold ways
• Much of the web is not designed with compatibility in mind
• Web pages don’t work the same way in every browser– This is usually a result of designers and
developers merging style and content in their documents.
– Not adhering to standards makes content
totally inaccessible in some browsers
Adopting thenew ways
• W3C standards enhance accessibility and promise long-term durability (forward web design).
• The rules take minutes to learn and the benefits are vast.• Tools are available to help.• Free online validators help ensure that your XHTML and
CSS are error free.• One of the main goals of XHTML is to get your documents
to the point where they are XML compliant. • XHTML will help your sites work better in more browsers
and devices, reaching more people.
The Rules andGuidelines
• Open with proper Doctype.
• All tags must be lower case.
• All attributes must be in quotes.
• All tags must be closed.
• All empty tags must be closed.
Open with proper Doctype
XHTML documents must begin with tags that tell the browser how to interpret them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This declaration should be placed at the very top of every XHTML document.
You will also find this tag beneficial
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
All tags must be lowercase
These will not validate as XHTML:<TITLE>Class Presentation</TITLE><table WIDTH=“100%”><Body BGColor=“#00ff00”> body text </Body>
In XHTML, the tags should read:<title>Class Presentation</title><table width=“100%”><body bgcolor=“#00ff00”> body text </body>
Unlike HTML, all XHTML must be typed in lowercase, or your document will not validate.
All attribute values must be in quotes
In HTML, you didn’t need to put quotations around attributes values. In XHTML, they must be quoted.
The following is incorrect:<table width=100%>
<img src="icon.png" height=10 width=10 />
The following is valid XHTML<table width=“100%”>
<img src="icon.png" height="10" width="10" />
All attribute values must be in quotes
Even in cases where the attribute only has one possible argument, you must specify the argument!
This is not valid code:<textarea name="text" rows="20" cols="80" readonly> text text text </textarea>
This is valid XHTML code:<textarea name="text" rows="20" cols="80" readonly=“readonly”> text text text </textarea>
Another change to be aware of:
Another change under XHTML is the use of page anchors. Even though this change will not become standard until versions of XHTML later than 1.0, you should begin including the XHTML tag attributes in order to ensure that your pages are compliant in the future. Later versions of XHTML are going to drop the "name=" attribute in page anchors. Instead, one should use the "id=" attribute to name an anchor that's referenced by a "#" in the URL.
Currently, most browsers only understand the "name=" argument, so until the browsers all catch up, simply use both of the attributes in your anchors, like this:
<a id="something" name="something">Something Else </a>
All tags must be closed
XHTML requires that you close all of your tags. It's something that we're used to doing already, but the tricky part comes in when you have to use closing tags that are optional in HTML -- when was the last time you used </li>? Every open tag in your
XHTML document needs to be accompanied by a closing tag.
A paragraph in you document cannot look like this:<p>This is a bad paragraph
Instead, use a closing tag, like this:<p>This is a good paragraph</p>
More on tags
You must remember to close every tag! Every <li> needs a </li> and every <td> needs a </td>. The same goes for all standard HTML tags, even the ones which feel awkward, like <img> and <br>. Fortunately, there is a shortcut for closing these tags that don't usually need to be logically closed. The shortcut is to add a close-command slash at the end of the tag to turn it off.
Tag shortcuts
Yes, even the break <br> tag needs to be closed.
Use either<br></br> or you can shortcut it as <br />
Even img and other tags must be closed:<img src="logo.png" alt="The Logo of My Company" /><hr />
This rule applies to all tags that you wouldn’t normally close if you were writing HTML 4.01
Your basic Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"> <html><head><title>Bare bones XHTML file</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /></head><body></body></html>
XHTML Strict
• No tables
• No font tags
• Remember, XHTML separates presentation from
content
Bring documents into strict compliance
This is the doctype statement to use for Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Tools
• W3C validator – http://validator.w3c.org • W3C CSS Validator • HTML Tidy (HTML – XHTML Converter
– Dos based program. – Windows or Unix (Linux) based. Also MAC. – Download from http://tidy.sourceforge.net.
• Homesite – Personal favorite Macromedia Homesite.
References
• http://www.w3c.org - World Wide Web Consortium
• http://www.w3schools.com - General tutorial and references
• http://www.alistapart.com/stories/betterliving/ - Good article
• http://www.sizefactory.com/xhtml/ - Good article and links
Notes
• If you use wysiwyg editors like Dreamweaver or Frontpage, you are likely to have errors
• Hopefully these will be better in the future
• Use the Validator to work problems out.
Notes
Remember that validators are not perfect, just like any other software product.
NotesThe infamous white space bug:
Each of the two tags below is functionally equivalent, but because of their varying use (or non–use) of white space, they might display differently in a browser that attempts to parse white space in markup.
Thus:<td><img src="foo.gif" /></td>
Might display differently than:<td> <img src="foo.gif" /></td>
Notes
Second example:
<td><a href="#foo"><img src="foo.gif" /></a></td>
Might display differently than:<td> <a href="#foo"> <img src="foo.gif" /> </a> </td>