XHTML The Basics A brief history of HTML • SGML (Standard Generalized Markup Language) • Then came HTML • Followed by the browser…and the great.
Download ReportTranscript XHTML The Basics A brief history of HTML • SGML (Standard Generalized Markup Language) • Then came HTML • Followed by the browser…and the great.
XHTML The Basics A brief history of HTML • 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 the old 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 the new ways • • • • • • W3C standards enhance accessibility and promise longterm 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 and Guidelines • • • • • 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 Unlike HTML, all XHTML must be typed in lowercase, or your document will not validate. 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> 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 Bring documents into strict compliance • No tables • No font tags • Remember, XHTML separates presentation from content 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. Notes The 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>