1 / 17

XHTML - Basics

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

smoreno
Télécharger la présentation

XHTML - Basics

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 - 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 code • Usual problems with HTML pages are • missing end tags for paragraphs </p> • inconstistencies with capital/small letters • attribute values etc.

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

  9. 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 /

  10. 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!

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

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

  13. Basic Structure of a XHTML document <!DOCTYPE> <html> <head> <title> </title> </head> <body> </body> </html>

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

  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

  16. 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">

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

More Related