170 likes | 184 Views
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
E N D
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/xhtml1-transitional.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 • 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)