![Page 1: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/1.jpg)
CSCI N241: Fundamentals of Web Design
Copyright ©2004 Department of Computer & Information Science
Introducing XHTML:Module B: HTML to XHTML
![Page 2: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/2.jpg)
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
![Page 3: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/3.jpg)
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
![Page 4: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/4.jpg)
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
![Page 5: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/5.jpg)
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
![Page 6: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/6.jpg)
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
![Page 7: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/7.jpg)
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
![Page 8: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/8.jpg)
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
![Page 9: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/9.jpg)
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
![Page 10: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/10.jpg)
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
![Page 11: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/11.jpg)
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
![Page 12: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/12.jpg)
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
![Page 13: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/13.jpg)
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
![Page 14: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/14.jpg)
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
![Page 15: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/15.jpg)
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
![Page 16: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/16.jpg)
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
![Page 17: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/17.jpg)
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
![Page 18: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/18.jpg)
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
![Page 19: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/19.jpg)
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
![Page 20: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/20.jpg)
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
![Page 21: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/21.jpg)
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
![Page 22: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/22.jpg)
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.
![Page 23: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/23.jpg)
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
![Page 24: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/24.jpg)
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
![Page 25: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/25.jpg)
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
![Page 26: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/26.jpg)
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.
![Page 27: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/27.jpg)
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.
![Page 28: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/28.jpg)
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>
![Page 29: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/29.jpg)
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.
![Page 30: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/30.jpg)
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
![Page 31: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/31.jpg)
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.
![Page 32: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/32.jpg)
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.
![Page 33: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/33.jpg)
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.
![Page 34: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/34.jpg)
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.
![Page 35: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/35.jpg)
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
![Page 36: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/36.jpg)
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)
![Page 37: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/37.jpg)
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
![Page 38: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/38.jpg)
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
![Page 39: CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML](https://reader033.vdocument.in/reader033/viewer/2022051412/55146cc4550346414e8b5e96/html5/thumbnails/39.jpg)
N241: Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Questions?