Transcript 5XHTML
XHTML - Basics Teppo Räisänen LIIKE/OAMK 2011 Introduction XHTML = eXtensible Hypertext Markup Language Transitional ~ HTML 4.01 Goal: to replace HTML by XHTML W3C: XHTML 1.0 (2000) Why XHTML? Many Web pages include bad HTML Browsers spend computing time for resolving conflicts in the markup Especially mobile browsers need flawless markup (because of the limited resources) Introduction XHTML is a stricter standard than HTML => Easier/wider browser support XHTML is a XML application E.g. many mobile browsers support XHTML All the modern desktop browsers support XHTML XHTML Versions XHTML 1.0 Derived from HTML 4.0 Some degree of UI formatting allowed XHTML Basic Only the basic elements Modularity/Modules Suitable for devices with a limited display capacity XHTML Versions XHTML 1.1 Follow the XML standard strictly No formatting of the UI (CSS used for that) XHTML 2 Introduced at 2002 XHTML vs. HTML HTML can be also written flawlessly There are many validators available for HTML code Usual problems with HTML pages are missing end tags for paragraphs </p> inconstistencies with capital/small letters attribute values etc. XHTML vs. HTML In XHTML: The structure of inner/outer elements must be correct: <b><i>Text</b></i> => WRONG! <b><i>Text</i></b> => CORRECT! b = bold letters i = italic letters XHTML vs. HTML In XHTML: Tags are written in small sized letters The ending tag must be used: <p></p> Also the empty elements must be closed: <br> => WRONG! <br /> => CORRECT! Note: a space character before / XHTML vs. HTML In XHTML: Small sized letters for the names of the attributes: Quotes around the values of the attributes: <table WIDTH=100%> => WRONG! <table width="100%"> => CORRECT! XHTML vs. HTML In XHTML: Abreviation of attibutes is not allowed: <frame noresize> => WRONG! <frame noresize=“noresize”> => CORRECT! ’lang’-attribute also requires use of xml:lang attribute <div lang=“fi" xml:lang=“fi">Suomea</div> The Mandatory Elements of XHTML DOCTYPE (Document Type Declaration) html head body title Basic Structure of a XHTML document <!DOCTYPE> <html> <head> <title> </title> </head> <body> </body> </html> DOCTYPE A XHTML document must follow one of the DTDs by W3C Strict Transitional Frameset With Web pages the most used form is the Transitional DTDs of XHTML Strict = the strictest form, no HTML formatting allowed at all Transitional = compliant against HTML 4.01 Frameset = for Web pages which utilize frames DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> From HTML to XHTML 1. 2. 3. 4. 5. DOCTYPE: addition/modification Tags and attributes to small letters Attribute values to quotes Correct format of the empty elements <br> => <br /> Validation (re-validation until the document is valid and well-formatted)