1. XHTML - Basics Teppo Räisänen LIIKE/OAMK 2011

2. Introduction XHTML = eXtensible Hypertext Markup Language Transitional ~ HTML 4.01 Goal: to replace HTML by XHTML W3C: XHTML 1.0 (2000)

3. 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)

4. 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

5. 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

6. XHTML Versions XHTML 1.1 Follow the XML standard strictly No formatting of the UI (CSS used for that) XHTML 2 Introduced at 2002

7. XHTML vs. HTML HTML can be also written flawlessly There are many validators available for HTML codevalidators Usual problems with HTML pages are missing end tags for paragraphs inconstistencies with capital/small letters attribute values etc.

8. XHTML vs. HTML In XHTML: The structure of inner/outer elements must be correct: Text => WRONG! Text => CORRECT! b = bold letters i = italic letters

9. XHTML vs. HTML In XHTML: Tags are written in small sized letters The ending tag must be used: Also the empty elements must be closed: => WRONG! => CORRECT! Note: a space character before /

10. XHTML vs. HTML In XHTML: Small sized letters for the names of the attributes: Quotes around the values of the attributes: => WRONG! => CORRECT!

11. XHTML vs. HTML In XHTML: Abreviation of attibutes is not allowed: => WRONG! => CORRECT! ’lang’-attribute also requires use of xml:lang attribute Suomea

12. The Mandatory Elements of XHTML DOCTYPE (Document Type Declaration) html head body title

13. Basic Structure of a XHTML document

14. DOCTYPE A XHTML document must follow one of the DTDs by W3CDTDs Strict Transitional Frameset With Web pages the most used form is the Transitional

15. 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 frames

16. DOCTYPE

17. From HTML to XHTML 1. DOCTYPE: addition/modification 2. Tags and attributes to small letters 3. Attribute values to quotes 4. Correct format of the empty elements => 5. Validation (re-validation until the document is valid and well-formatted) Validation