1 / 62

Introducing XHTML: Module C: Document Structure

Introducing XHTML: Module C: Document Structure. Goals. Understand how to use DTDs Understand the importance of backward compatibility Understand how to use block-level elements Understand how to use inline elements. Creating XHTML Documents.

sen
Download Presentation

Introducing XHTML: Module C: Document Structure

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. Introducing XHTML:Module C: Document Structure

  2. Goals • Understand how to use DTDs • Understand the importance of backward compatibility • Understand how to use block-level elements • Understand how to use inline elements

  3. Creating XHTML Documents • This is accomplished through the use of three DTDs: Transitional, Frameset, and Strict • Even though the XHTML DTDs are an improvement over HTML, they may still be too large for many types of user agents

  4. Creating XHTML Documents • This is accomplished through the use of three DTDs: Transitional, Frameset, and Strict • Even though the XHTML DTDs are an improvement over HTML, they may still be too large for many types of user agents

  5. Creating XHTML Documents • Many of the elements found in XHTML 1.0, such as graphics, tables, and frames, may not be useable on many user agents, such as PDAs or mobile phones

  6. Creating XHTML Documents • One big difference between XML and XHTML: • Whereas XML does not contain any predefined elements, XHTML contains almost all the elements that are available in HTML

  7. Backward Compatibility • To be backward compatible with older browsers, you save XHTML documents with an extension of .html or .htm, just like HTML documents

  8. Backward Compatibility • You must follow several rules to ensure that the code within your XHTML documents is also backward compatible • XML requires that empty elements include a slash before the closing bracket to close the element

  9. Backward Compatibility • Older browsers that do not support XML ignore the element when they see the slash immediately following the element name in an empty element

  10. Backward Compatibility • You can ensure that older browsers are able to read empty elements in a well-formed XHTML document by adding a space between the element name and the closing slash

  11. The <!DOCTYPE> Declaration • An XHTML document must include a <!DOCTYPE> declaration and the <html>, <head>, and <body> elements

  12. The <!DOCTYPE> Declaration • The <!DOCTYPE>declaration states the XHTML version of the document and the XHTML DTD (Transitional, Frameset, or Strict) with which the document complies

  13. XHTML DTDs • The World Wide Web Consortium (W3C) created XHTML to make the transition to XML-based Web pages easier • To facilitate the transition, the W3C provided three types of XHTML DTDs: Transitional, Frameset, and Strict

  14. Transitional DTD • Elements and attributes that are considered to be obsolete and that will eventually be eliminated are said to be deprecated. • The Transitional DTD allows you to continue using deprecated elements along with the well-formed document requirements of XML.

  15. Transitional DTD

  16. Frameset DTD • The Frameset DTD is identical to the transitional DTD, except that it includes the <frameset> and <frame> elements

  17. Frameset DTD • Allows you to split the browser window into two or more frames, which are independent, scrollable portions of a Web browser window, with each frame capable of displaying a separate URL

  18. Strict DTD • The Strict DTD eliminates the elements that were deprecated in the Transitional DTD and Frameset DTD

  19. Strict DTD • The <!DOCTYPE> declaration for the Strict DTD is as follows: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

  20. Validating Web Pages • To ensure that an XHTML document is well formed and that its elements are valid, you need to use a validating parser

  21. Validating Web Pages • Validation checks that your XHTML document is well formed, and that the elements in your document are correctly written according to the element definitions in an associated DTD. You are not actually required to validate XHTML documents.

  22. Validating Web Pages • If you do not validate an XHTML document and it contains errors, most Web browsers will probably treat it as an HTML document, ignore the errors, and render the page anyway

  23. Validating Web Pages • Many XHTML validating parsers exist • One of the best available is the W3C MarkUp Validation Service, a free service that validates both HTML and XHTML • The W3C MarkUp Validation Service is located at http://validator.w3.org

  24. XHTML Elements and Attributes • The data contained within an element’s opening and closing tags is referred to as its content • You must close empty elements by adding a space and a slash before the tag’s closing bracket

  25. Block-Level and Inline Elements • Two basic types of elements can appear within a document’s <body> element: block-level and inline • Block-level elements are elements that give a Web page its structure

  26. Block-Level and Inline Elements • Inline, or text-level, elements describe the text that appears on a Web page • Unlike block-level elements, inline elements do not appear on their own lines; they appear within the line of the block-level element that contains them

  27. Block-Level and Inline Elements

  28. Standard Attributes • You place attributes before the closing bracket of the starting tag, and you separate them from the tag name or other attributes with a space • Many XHTML attributes are unique to a specific element or can only be used with certain types of elements

  29. Standard Attributes • XHTML also includes several standard, or common,attributes that are available to almost every element, with a few exceptions

  30. Standard Attributes

  31. Standard Attributes • In order to be a considerate resident of the international world of the Web, you should designate the language of your elements using the lang and xml:lang attributes

  32. Standard Attributes • The lang attribute is used in HTML documents, whereas the xml:lang attribute is used in XML-based documents

  33. Boolean Attributes • A Boolean attribute specifies one of two values: true or false • The presence of a Boolean attribute in an element’s opening tag indicates a value of “true”, whereas its absence indicates a value of “false”

  34. Boolean Attributes • When a Boolean attribute is not assigned a value, it is referred to as having a minimized form • Recall that all attribute values must appear within quotation marks

  35. Boolean Attributes • This syntax also means that an attribute must be assigned a value • For this reason, minimized Boolean attributes are illegal in XHTML • You can still use Boolean attributes in XHTML provided you use their full form

  36. Boolean Attributes • You create the full form of a Boolean attribute by assigning the name of the other attribute itself as the attribute’s value

  37. Required Elements • To better understand how an XHTML document is structured, in this section you study in detail the three elements that must be included in every XHTML document: the <html>, <head>, and <body> elements

  38. The <html> Element • All HTML documents must include an <html> element, which tells a Web browser that the instructions between the opening and closing <html> tags are to be assembled into an HTML document

  39. The <html> Element • The <html> element is required and contains all the text and other elements that make up the HTML document

  40. The <html> Element • The <html> element is also the root element for XHTML documents and is required for XHTML documents to be well formed

  41. The XHTML Namespace • All of the predefined elements in an XHTML document are organized within the XHTML namespace that you declare in the <html> element

  42. The XHTML Namespace • In order to understand what a namespace is, recall that you must define your own elements and attributes in an XML document

  43. The XHTML Namespace • You identify each element by the namespace to which it belongs • A namespace organizes the elements and attributes of an XML document into separate groups

  44. The XHTML Namespace • For elements, you add the namespace and colon before the tag name in both the opening and closing tags

  45. The XHTML Namespace • A default namespace is applied to all of the elements and attributes in an XHTML document, with the exception of elements and attributes to which local namespaces have been applied

  46. The XHTML Namespace • You specify a default namespace for an XHTML document by using the xmlnsnamespace attribute in the <html> element

  47. The Document Head • The elements within a document’s head section contain information about the Web page itself

  48. The Document Head • The document head does not actually display any information in a browser • Rather, it is a parent element that can contain several child elements • A parent element is an element that contains other elements, known as child elements

  49. Child Elements of the <head> Element

  50. The Document Body • The document body is represented by the <body> element and contains other elements that define all of the content a user sees rendered in a browser

More Related