1. Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Introducing XHTML: Module C: Document Structure

2. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Goals Understand how to use DTDsUnderstand how to use DTDs Understand the importance of backward compatibilityUnderstand the importance of backward compatibility Understand how to use block-level elementsUnderstand how to use block-level elements Understand how to use inline elementsUnderstand how to use inline elements

3. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science This is accomplished through the use of three DTDs: Transitional, Frameset, and StrictThis 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 agentsEven though the XHTML DTDs are an improvement over HTML, they may still be too large for many types of user agents Creating XHTML Documents

4. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science This is accomplished through the use of three DTDs: Transitional, Frameset, and StrictThis 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 agentsEven though the XHTML DTDs are an improvement over HTML, they may still be too large for many types of user agents Creating XHTML Documents

5. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 phonesMany 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 Creating XHTML Documents

6. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science One big difference between XML and XHTML: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 Creating XHTML Documents

7. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Backward Compatibility To be backward compatible with older browsers, you save XHTML documents with an extension of.html or.htm, just like HTML documentsTo be backward compatible with older browsers, you save XHTML documents with an extension of.html or.htm, just like HTML documents

8. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Backward Compatibility You must follow several rules to ensure that the code within your XHTML documents is also backward compatibleYou 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 elementXML requires that empty elements include a slash before the closing bracket to close the element

9. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 elementOlder browsers that do not support XML ignore the element when they see the slash immediately following the element name in an empty element

10. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 slashYou 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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Declaration An XHTML document must include a declaration and the,, and elementsAn XHTML document must include a declaration and the,, and elements

12. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Declaration The declaration states the XHTML version of the document and the XHTML DTD (Transitional, Frameset, or Strict) with which the document compliesThe declaration states the XHTML version of the document and the XHTML DTD (Transitional, Frameset, or Strict) with which the document complies

13. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science XHTML DTDs The World Wide Web Consortium (W3C) created XHTML to make the transition to XML-based Web pages easierThe 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 StrictTo facilitate the transition, the W3C provided three types of XHTML DTDs: Transitional, Frameset, and Strict

14. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Transitional DTD Elements and attributes that are considered to be obsolete and that will eventually be eliminated are said to be deprecated.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.The Transitional DTD allows you to continue using deprecated elements along with the well-formed document requirements of XML.

15. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Transitional DTD

16. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Frameset DTD The Frameset DTD is identical to the transitional DTD, except that it includes the and elementsThe Frameset DTD is identical to the transitional DTD, except that it includes the and elements

17. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 URLAllows 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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Strict DTD The Strict DTD eliminates the elements that were deprecated in the Transitional DTD and Frameset DTDThe Strict DTD eliminates the elements that were deprecated in the Transitional DTD and Frameset DTD

19. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Strict DTD The declaration for the Strict DTD is as follows:The 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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Validating Web Pages To ensure that an XHTML document is well formed and that its elements are valid, you need to use a validating parserTo ensure that an XHTML document is well formed and that its elements are valid, you need to use a validating parser

21. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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.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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 anywayIf 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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Validating Web Pages Many XHTML validating parsers existMany 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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science XHTML Elements and Attributes The data contained within an element’s opening and closing tags is referred to as its contentThe 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 bracketYou must close empty elements by adding a space and a slash before the tag’s closing bracket

25. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Block-Level and Inline Elements Two basic types of elements can appear within a document’s element: block-level and inlineTwo basic types of elements can appear within a document’s element: block-level and inline –Block-level elements are elements that give a Web page its structure

26. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Block-Level and Inline Elements

28. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 spaceYou 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 elementsMany XHTML attributes are unique to a specific element or can only be used with certain types of elements

29. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Standard Attributes XHTML also includes several standard, or common, attributes that are available to almost every element, with a few exceptionsXHTML also includes several standard, or common, attributes that are available to almost every element, with a few exceptions

30. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Standard Attributes

31. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 attributesIn 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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Standard Attributes The lang attribute is used in HTML documents, whereas the xml:lang attribute is used in XML-based documentsThe lang attribute is used in HTML documents, whereas the xml:lang attribute is used in XML-based documents

33. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Boolean Attributes A Boolean attribute specifies one of two values: true or falseA 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”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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Boolean Attributes When a Boolean attribute is not assigned a value, it is referred to as having a minimized formWhen 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 marksRecall that all attribute values must appear within quotation marks

35. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Boolean Attributes This syntax also means that an attribute must be assigned a valueThis 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 formYou can still use Boolean attributes in XHTML provided you use their full form

36. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Boolean Attributes You create the full form of a Boolean attribute by assigning the name of the other attribute itself as the attribute’s valueYou create the full form of a Boolean attribute by assigning the name of the other attribute itself as the attribute’s value

37. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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,, and elementsTo 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,, and elements

38. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element All HTML documents must include an element, which tells a Web browser that the instructions between the opening and closing tags are to be assembled into an HTML documentAll HTML documents must include an element, which tells a Web browser that the instructions between the opening and closing tags are to be assembled into an HTML document

39. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element is required and contains all the text and other elements that make up the HTML documentThe element is required and contains all the text and other elements that make up the HTML document

40. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element is also the root element for XHTML documents and is required for XHTML documents to be well formedThe element is also the root element for XHTML documents and is required for XHTML documents to be well formed

41. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The XHTML Namespace All of the predefined elements in an XHTML document are organized within the XHTML namespace that you declare in the elementAll of the predefined elements in an XHTML document are organized within the XHTML namespace that you declare in the element

42. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The XHTML Namespace In order to understand what a namespace is, recall that you must define your own elements and attributes in an XML documentIn order to understand what a namespace is, recall that you must define your own elements and attributes in an XML document

43. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The XHTML Namespace You identify each element by the namespace to which it belongsYou identify each element by the namespace to which it belongs A namespace organizes the elements and attributes of an XML document into separate groupsA namespace organizes the elements and attributes of an XML document into separate groups

44. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The XHTML Namespace For elements, you add the namespace and colon before the tag name in both the opening and closing tagsFor elements, you add the namespace and colon before the tag name in both the opening and closing tags

45. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 appliedA 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. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The XHTML Namespace You specify a default namespace for an XHTML document by using the xmlns namespace attribute in the elementYou specify a default namespace for an XHTML document by using the xmlns namespace attribute in the element

47. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Document Head The elements within a document’s head section contain information about the Web page itselfThe elements within a document’s head section contain information about the Web page itself

48. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Document Head The document head does not actually display any information in a browserThe 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 elementsA parent element is an element that contains other elements, known as child elements

49. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Child Elements of the Element

50. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Document Body The document body is represented by the element and contains other elements that define all of the content a user sees rendered in a browserThe document body is represented by the element and contains other elements that define all of the content a user sees rendered in a browser

51. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Document Body XHTML documents consist of elements that contain content, as opposed to HTML documents, which consist of content that contains elementsXHTML documents consist of elements that contain content, as opposed to HTML documents, which consist of content that contains elements

52. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Document Body In HTML, you can also use various attributes in the element that affect the appearance of the document, such as the bgcolor attribute for setting the background color and the text attribute for setting the default color of textIn HTML, you can also use various attributes in the element that affect the appearance of the document, such as the bgcolor attribute for setting the background color and the text attribute for setting the default color of text

53. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Basic Body Elements Basic body elements such as the and elements are some of the most frequently used elements in Web page authoringBasic body elements such as the and elements are some of the most frequently used elements in Web page authoring

54. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Headings Heading elements are used for emphasizing a document’s headings and subheadings, which helps provide structure by hierarchically organizing a document’s contentHeading elements are used for emphasizing a document’s headings and subheadings, which helps provide structure by hierarchically organizing a document’s content There are six heading elements, through There are six heading elements, through

55. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Paragraphs and Line Breaks The paragraph ( ) and line- break ( ) elements provide the simplest way of adding white space to a documentThe paragraph ( ) and line- break ( ) elements provide the simplest way of adding white space to a document

56. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Paragraphs and Line Breaks White space refers to the empty areas on a pageWhite space refers to the empty areas on a page –It makes a page easier to read and is more visually appealing

57. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Paragraphs and Line Breaks –It is tempting for beginning Web page authors to try and pack each page with as much information as possible, but experienced Web page authors know that the presence of white space is critical to the success of a page, whether you are creating a Web page or a traditional printed page

58. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Horizontal Rules The empty horizontal-rule ( ) element draws a horizontal rule on a Web page that acts as a section dividerThe empty horizontal-rule ( ) element draws a horizontal rule on a Web page that acts as a section divider

59. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Horizontal Rules Horizontal rules are useful visual elements for breaking up long documentsHorizontal rules are useful visual elements for breaking up long documents Although the element is technically a block-level element, it cannot contain any content because it is an empty elementAlthough the element is technically a block-level element, it cannot contain any content because it is an empty element

60. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Comments Comments are nonprinting lines that you place in your code to contain various types of remarks.Comments are nonprinting lines that you place in your code to contain various types of remarks. XHTML comments begin with an opening comment tag XHTML comments begin with an opening comment tag

61. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Web Page with Comments

62. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Resources Slides were adapted from the following text & companion lectures:Slides were adapted from the following text & companion lectures: XHTML, Comprehensive First Edition Dan Gosselin Published by Course Technology (2004)

63. Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Questions?