Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from and Beginning XHTML ©2000 Wrox Presshttp://faculty.northseattle.edu/jkent/it111/lecture_notes.html

What is HTML? The World Wide Web Consortium ( sets the standards for HTML and its related languages The set of markup symbols or codes placed in a file intended for display on a Web browser page HTML is based on an older language called Standard Generalized Markup Language, or SGML, which defines the data in a document independently of how the data will be displayed A target output format refers to the medium in which a document will be displayed, such as a Web page or an online help system

Basic HTML Syntax HTML documents are text documents that contain:  formatting instructions, called tags  the text that is to be displayed on a Web page HTML tags range from formatting commands to controls that allow user input

Basic HTML Syntax 2 Tags are enclosed in brackets ( ), and most consist of a starting tag and an ending tag that surround the text or other items they are formatting or controlling You use various parameters, called attributes, to configure many HTML tags You place an attribute before the closing bracket of the starting tag, and separate it from the tag name or other attributes with a space

Common Structure and Formatting HTML Tags

What is XML? XML – eXtensible Markup Langauge  A text-based language designed to describe, deliver, and exchange structured information  Not intended to replace HTML  Intended to extend the power of HTML by separating data from presentation  Users can create their own tags  Like HTML, XML is based on SGML An XML document must be well-formed  Use lowercase  Use opening and closing tags: Close stand-alone tag with special syntax: XML documents begin with an XML directive The basic form of this directive is:

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

What’s wrong with HTML? The Web has changed from a medium used to display electronic versions of paper documents to a medium that provides diverse information for a variety of devices HTML does not fit this need HTML is a structural language – it was originally intended to markup printed documents for online viewing With the expansion of the Web to include devices other than personal computers, such as mobile phones and PDAs, the need for a descriptive rather than structural language became evident and XHTML was created

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 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 To make the transition to XML-based Web pages easier, the W3C combined XML and HTML to create Extensible Hypertext Markup Language (XHTML)

Combining XML and HTML 2 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

XHTML The newest version of HTML is actually XHTML – eXtensible HyperText Markup Language Developed by the W3C as the reformulation of HTML 4.0 as an application of XML It combines the formatting strengths of HTML 4.0 and the data structure and extensibility strengths of XML XHTML uses the tags and attributes of HTML along with the syntax of XML While many web pages and web authoring tools still use HTML, as a web developer you need to learn about XHTML

Relationship between XHTML, HTML, and XML

HTML vs. XHTML Major differences:  XHTML elements must be properly nested  XHTML documents must be well-formed  Tag names must be in lowercase  All XHTML elements must be closed

HTML vs. XHTML Elements Must Be Properly Nested In HTML some elements can be improperly nested within each other like this: This text is bold and italic In XHTML all elements must be properly nested within each other like this: This text is bold and italic

HTML vs. XHTML Elements Must Be Properly Nested 2 A common mistake in nested lists, is to forget that the inside list must be within an li element, like this: Coffee Tea Black tea Green tea Milk

HTML vs. XHTML Elements Must Be Properly Nested 3 Correct version for XHTML: Coffee Tea Black tea Green tea Milk

HTML vs. XHTML Documents Must Be Well-formed All XHTML elements must be nested within the root element All other elements can have sub (children) elements Sub elements must be in pairs and correctly nested within their parent element

HTML vs. XHTML Documents Must Be Well-formed 2 The basic document structure is:...

HTML vs. XHTML All XHTML Elements Must Be Closed Non-empty elements must have an end tag This is wrong: This is a paragraph This is another paragraph This is correct: This is a paragraph This is another paragraph

HTML vs. XHTML Empty Elements Must also Be Closed Empty elements must either have an end tag or the start tag must end with /> This is wrong: This is a break Here comes a horizontal rule: Here's an image This is correct: This is a break Here comes a horizontal rule: Here's an image

HTML vs. XHTML Miscellaneous XHTML requires a DTD declaration XHTML requires a reference to the XML namespace in the element XML is case sensitive so XHTML tag names and attribute names must be given in lower case

HTML vs. XHTML Miscellaneous 2 In XHTML, and elements cannot be omitted First element in the head must be the element All attribute values must be enclosed in quotation marks, and may not be minimised  This is wrong:  This is correct:

HTML vs. XHTML Miscellaneous 3 To avoid and elements being interpreted as the beginning of markup, they must contain a CDATA line: <![CDATA[ … unescaped script content … ]]>

Backward Compatibility To be backward compatible with older browsers, you save XHTML documents with an extension of.html or.htm, just like HTML documents 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

Backward Compatibility 2 Older browsers that do not support XML ignore the element when they see the slash immediately following the element name in an empty element 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

For More Information World Wide Web Consortium  Greg’s Web  W3Schools 