XHTML Introduction to XHTML Extensible Hyper Text Markup

XHTML

Introduction to XHTML Extensible Hyper. Text Markup Language XHTML vs HTML XHTML: Separating structure and presentation (use CSS) A valid XHTML document allows only its content and structure HTML Can still contain formatting elements

First XHTML Example <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> Welcome to XHTML! </body> </html>

XHTML Namespace (1/4) <? xml version = "1. 0"? encoding = “UTF-8”? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd"> <html xmlns = “http: //www. w 3. org/1999/xhtml”> (Your XHTML page contents here) </html> Top-level declaration Required to conform to XHTML syntax

XHTML Namespace (2/4) <? xml version = "1. 0"? encoding = “UTF-8”? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns = “http: //www. w 3. org/1999/xhtml”> !DOCTYPE = specify what version of XHTML you’re using. It tells browsers what type of information to expect in the page, which in turn, tells it how to render the page. It is also used by XHTML validators to verify syntax of the webpage <? xml. . . > declaration = a processing instruction used to declare that this document is an XML document which uses the UTF-8 (Unicode) character encoding.

XHTML Namespace (3/4) • • <? xml version = "1. 0"? encoding = “UTF-8”? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd"> • <html xmlns = “http: //www. w 3. org/1999/xhtml”> the <html xmlns. . . > line opens the XHTML document and declares the default namespace

XHTML Namespace (3/4) So, what is an XHTML Namespace? Briefly, namespaces are unique identifiers used in XML to differentiate between different markup languages. Each markup language, such as XHTML, has a namespace (e. g. http: //www. w 3. org/1999/xhtml)

XHTML Comments •  •  Similar with HTML comments

XHTML Elements Important elements of an XHTML document are <html> <head> <body> The html element encloses the head section and the body section The head section contains information about the XHTML document AND can also contain special document formatting instructions (style sheets, scripts) The body section contains the page’s content that the browser displays

XHTML Elements within an XHTML document have start and end tags <html> </html> A start tag may have attribute with its value An empty element contains only attributes and do not markup text.

Validating an XHTML document W 3 C provides a validation service (http: //validator. w 3. org) for checking the syntax

Other Elements Header elements <h 1> to <h 6> Linking <a href=“ “></a> OR <a href=“mailto: “></a> Images <img src=“ “/> Special Characters (character entity references) and Line Breaks < > & <hr />,

Other Elements (cont’d) Lists (ordered and unordered) <ol> </ol> and <ul> </ul> <li> </li> Image Maps Framesets Tables

XHTML Syntax Rules Documents must be well-formed Elements must nest symmetrically Element names are case sensitive End tags are required Empty Elements are signified by a closing slash Give space so older browsers will ignore the XHTML closing slash e. g. Attribute values must be contained in Quotes

Why XHTML? Cleaner code XHTML requires us to remove code that does match the standard such as deprecated elements XHTML is based on XML so its capabilities can be extended Supports the variety of new devices & new technologies used to access the Internet Works smoothly with database and workflow applications

Style Sheets are Required XHTML does not contain presentation information The benefit of separating data from style the same information can be directed to various display devices simply by changing the style sheet data-once, destination-many The two style sheets languages that are available for use with XML or XHTML: CSS and XSL

From HTML to XHTML <H 1>Some plain HTML code</h 1> This is a paragraph of text. <IMG SRC="xml. gif"> <H 3>A bulleted list</H 3> <UL> <LI>Item one <LI>Item two <LI>Item three <h 1>Some plain HTML code</h 1> This is a paragraph of text. <img src="xml. gif" /> <h 3>A bulleted list</h 3> <ul> <li>item one</li> <li>item two</li> <li>item three</li> </ul>

Migrating from HTML to XHTML Evaluate existing code Check for basic compliance with XHTML syntax rules Use HTML editing softwares to get this automatically done Evaluate existing presentation information Are there deprecated tags e. g. and deprecated attributes e. g. “bgcolor”, “face” and “size”? Convert these to CSS

Migrating from HTML to XHTML (cont’d) Create coding conventions To make sure that new coding and content added will follow this standard Start using CSS Test for backward compatibility

XHTML Document Types Strict Clean, structural markup code. Free of any markup tags associated with layout and from deprecated tags Use CSS for styling Transitional Most common. Allows obsolete elements from older versions of HTML and newer features such as style sheets and well-formed markup. Frameset When using frames