CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML
Mar 26, 2015
CSCI N241: Fundamentals of Web Design
Copyright ©2004 Department of Computer & Information Science
Introducing XHTML:Module B: HTML to XHTML
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Goals
• Understand how XHTML evolved as a language for Web delivery
• Understand the importance of DTDs
• Understand how to validate XML/XHTML markup
• Understand how XML/XHTML differ from HTML
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Evolution of XHTML
• The Web is expanding to other media, called user agents, which are devices that are capable of retrieving and processing HTML and XHTML documents
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Evolution of XHTML
• A user agent can be a traditional Web browser or a device such as a mobile phone or PDA, or even an application that simply collects and processes data instead of displaying it
• HTML is not suitable for user agents other than Web browsers
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Evolution of XHTML
• HTML has evolved into a markup language that is more concerned with how data appears than with the data itself
• Current and older versions of Web browsers allow you to write sloppy HTML code
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Evolution of XHTML
• Languages based on SGML use a Document Type Definition, or DTD, to define the tags and attributes that you can use in a document, and the rules the document must follow when it includes them
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Evolution of XHTML
• When a document conforms to an associated DTD, it is said to be valid
• When a document does not conform to an associated DTD, it is said to be invalid
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Evolution of XHTML
• You can check whether a document conforms to an associated DTD by using a program called a validating parser
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Evolution of XHTML
• Because HTML is based on SGML, it requires a DTD, and the HTML DTD is built directly into Web browsers
• When a Web browser opens an HTML document, it first compares the document to the DTD
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Evolution of XHTML
• If an HTML document is missing any required tags, the HTML DTD supplies them, allowing the Web browser to render the page correctly
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Basics of XML
• Extensible Markup Language, or XML, is used for creating Web pages and defining and transmitting data between applications
• Like HTML, XML is based on SGML
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Basics of XML
• Version 1.0 of XML achieved recommendation status by the W3C in 1998 and was still current at the time of this writing
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The Basics of XML
• In XML you refer to a tag pair and the data it contains as an element
• All elements must have an opening and a closing tag
• The data contained within an element’s opening and closing tags is referred to as its content
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The XML Declaration
• XML documents should begin with an XML declaration
• Specifies the version of XML being used
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The XML Declaration
• Not required to include an XML declaration because currently only one version of XML exists, version 1.0
• The encoding attribute of the XML declaration designates the language used by the XML document
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The XML Declaration
• It’s a good practice to always include the XML declaration because XML will almost certainly evolve into other versions that will contain features not found in version 1.0
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Parsing XML Documents
• When a document adheres to XML’s syntax rules, it is said to be well formed
• You will study XML’s rules for writing well formed documents
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Parsing XML Documents
• You use a program called a parser to check whether an XML document is well formed
• Two types of parsers: non-validating and validating
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Parsing XML Documents
• A non-validating parser simply checks whether an XML document is well formed
• A validating parser checks whether an XML document is well formed and if it conforms to an associated DTD
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Writing Well-Formed Documents
• Well-formed XML documents allow user agents to read the document’s data easily
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Writing Well-Formed Documents
• User agents expect XML data to be structured according to specific rules, which allows the user agent to read data quickly without having to decipher the data structure
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
All XML Documents Must Have a Root Element
• A root element contains all the other elements in a document.
• The <html>…</html> element is the root element for HTML documents, although most Web browsers do not require a document to include it.
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
All XML Documents Must Have a Root Element
• XML documents, however, require a root element that you define yourself
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
XML is Case Sensitive
• Unlike HTML tags, XML tags are case sensitive
• With XML, you cannot mix the case of elements
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
XML is Case Sensitive
• If you use a different case for an opening and closing tag, they will be treated as completely separate tags, resulting in a document that is not well formed
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
All XML Elements Must Have Closing Tags
• XML is designed to organize data, not display it.
• As a result, instead of documents consisting of text that contains elements, as is the case with HTML, XML documents consist of elements that contain text.
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
All XML Elements Must Have Closing Tags
• All elements must have a closing tag or the document will not be well formed.
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
XML Elements Must Be Properly Nested
• Nesting refers to how elements are
placed inside other elements
<p><b><i>
This paragraph is bold and italicized.
</i></b></p>
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
XML Elements Must Be Properly Nested
• In an HTML document, it makes no difference how the elements are nested.
• XML documents require that tags be closed in the opposite order in which they were opened.
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Attribute Values Must Appear Within Quotation Marks
• In HTML, an attribute value can be placed inside quotation marks or they may be left off.
• With XML, you must place quotation marks around the values assigned to an attribute
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Empty Elements Must Be Closed
• Several elements in HTML do not have corresponding ending tags, including the <hr> element, which inserts a horizontal rule into the document, and the <br> element, which inserts a line break.
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Empty Elements Must Be Closed
• Elements that do not require an ending tag are called empty elements because you cannot use them as a tag pair to enclose text or other elements.
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Empty Elements Must Be Closed
• You can create an empty element in an XML document by adding a single slash (/) before the tag’s closing bracket to close the element
• Most often, you use an empty element for an element that does not require content, such as an image.
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Combining XML and HTML
• Although XML was designed primarily to define data, this does not mean that you cannot use it to create Web pages.
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Combining XML and HTML
• You can create formatted Web pages using XML and Extensible Stylesheet Language, or XSL, which is a specification for formatting XML in a Web browser
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Combining XML and HTML
• To make the transition to XML-based Web pages easier, the W3C combined XML and HTML to create Extensible Hypertext Markup Language (XHTML)
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Combining XML and HTML
• Combination of XML and HTML that is used to author Web pages
• XHTML is almost identical to HTML, except that it uses strict XML syntax to describe the parts of a document
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Resources
• Slides were adapted from the following text & companion lectures:First Edition
Dan Gosselin
Published by Course Technology (2004)
XHTML, Comprehensive
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Questions?