1 / 23

XHTML

XHTML. Presented by Kelly(Geun-young) Yim. Learning Objectives. List the difference between XHTML and HTML Create a valid, well-formed XHTML document Convert an existing HTML document to XHTML Decide when XHTML is more appropriate than HTML. What is XHTML?.

morgan
Télécharger la présentation

XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML Presented by Kelly(Geun-young) Yim

  2. Learning Objectives • List the difference between XHTML and HTML • Create a valid, well-formed XHTML document • Convert an existing HTML document to XHTML • Decide when XHTML is more appropriate than HTML

  3. What is XHTML? • XHTML stands for eXtensible HyperText Markup Language • Two major puposes • XHTML is a stricter standard than HTML • XHTML allows for modularisation • Overall, XHTML is almost the same as HTML • However, XHTML code must be well-formed.

  4. Why XHTML? • Most web pages were designed in HTML • However, HTML allows all sort of mistakes and bad formatting in its code. • XHTML is stricter and easier to parse

  5. XHTML • An XHTML document must contain a DOCTYPE declaration and four elements • <!DOCTYPE ... > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body></body> </html> Also, the root html tag of an XHTML document must include an xmlns declaration for the XHTML namespace.

  6. Preferred DOCTYPE • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  7. Has to be the same XHTML • XML Prolog <?xml version="1.0" encoding="UTF-8"?> • Language <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  8. Needs to be switched XHTML vs. HTML • Documents must be well-formed • Incorrect <b><u> This text is probably bold and underlined, but inside incorrectly nested tags. </b></u>

  9. XHTML vs. HTML • Elements must be closed </p> </li> • Incorrect <p>Here is a list: <ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul> </li> </li>

  10. XHTML vs. HTML • What if there are no closing tags in HTML / / Make sure to put a space between / • Incorrect <img src="titlebar.gif" alt="Title" > <hr > <br > <p>Welcome to my web page!</p>

  11. Common empty tags in HTML • area • base • basefont • br • hr • img • input • link • meta • param

  12. XHTML vs. HTML • Tags must be lowercase h1 • Attribute names must be lowercase <H1>This is an example of bad case.</h1> <p CLASS="specialText">Important Notice</p> class

  13. XHTML vs. HTML • Attribute values must be quoted “ ” “” <table border= 1 width= 100% > <tr><td> Tables are fun! </td></tr> </table>

  14. …/> =“checked” …/> =“disabled” XHTML vs. HTML • Attributes cannot be minimized <form> <input checked ... /> <input disabled ... /> </form>

  15. A complete list of minimized attributes • noresize • noshade • nowrap • readonly • selected • multiple • checked • compact • declare • defer • disabled • ismap • nohref

  16. id=“anchor” > id=“mybanner” /> XHTML vs. HTML • The name attribute is replaced with the id attribute <a name="anchor"> <img src="banner.gif" name="mybanner" /> </a>

  17. XHTML vs. HTML • Ampersands are not supported amp; amp; <a href="home.aspx?status=done& itWorked=false"> Home & Garden</a>

  18. XHTML vs. HTML • Image alt attributes are mandatory alt="title" <img src="titlebar.gif" />

  19. XHTML vs. HTML • Scripts and CSS must be escaped <script language="JavaScript" > <!– document.write ('Hello World!'); //--> </script> <style > <!-- .SpecialClass { color: #000000; } --> </style> language="javascript" /*<![CDATA[*/ /*]]>*/ createElementNS type=“text/css” /*<![CDATA[*/ /*]]>*/

  20. XHTML vs. HTML • Some elements may not be nested

  21. When to convert • When you want pages to be easily viewed over a nontraditional Internet-capable device, such as a PDA or Web-enabled telephone. • When you plan to work with XML in the future • When it is important your site to be current with the most recent W3C standards. • When you will need to convert your documents to another format.

  22. Exercise • Change this HTML into an XHTML document conforming to the W3C’s strict standard. Validate your page using the validator available at http://validator.w3.org/

  23. <html> <head> <title> Convert html to XHTML </head> <body text=blue> <h1> <center> XHTML page </center> </h1> <p><b> It is important your site to be current with the most recent W3C standards. </p></b> <u>Welcome</u> to my <b>page</b>.<br> I hope that you <i>enjoy</i> your stay. <p> <font color=#9900FF face=Arial size=+2> XHTML is similar to HTML </font> </p> <a href=http://validator.w3.org/> Validator </a> </body> </html>

More Related