upgrading to xhtml deco 3001 tutorial 1 – part 1 presented by ji soo yoon 19 february 2004 slides...

Upgrading to XHTMLDECO 3001 Tutorial 1 – Part 1

Presented by Ji Soo Yoon19 February 2004

Slides adopted from http://faculty.northseattle.edu/jkent/it111/lecture_notes.html, http://www.w3schools.com/xhtml/default.asp, http://www.pint.com/classes, http://wally.cs.iupui.edu/n241-new/ and Beginning XHTML ©2000 Wrox Press

What is HTML?

The World Wide Web Consortium (http://w3c.org) 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: <body> </body>

Close stand-alone tag with special syntax: <hr />

XML documents begin with an XML directive

The basic form of this directive is: <?xml version="1.0" encoding="UTF-8"?>

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. XHTMLElements Must Be Properly Nested

In HTML some elements can be improperly nested within each other like this:<b><i>This text is bold and italic</b></i>

In XHTML all elements must be properly nested within each other like this:<b><i>This text is bold and italic</i></b>

HTML vs. XHTMLElements 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:<ul>

<li>Coffee</li><li>Tea

<ul><li>Black tea</li><li>Green tea</li>

</ul><li>Milk</li>

</ul>

HTML vs. XHTMLElements Must Be Properly Nested 3

Correct version for XHTML:<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

HTML vs. XHTMLDocuments Must Be Well-formed

All XHTML elements must be nested within the <html> 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. XHTMLDocuments Must Be Well-formed 2

The basic document structure is:

<html>

<head> ... </head>

<body> ... </body>

</html>

HTML vs. XHTMLAll XHTML Elements Must Be Closed

Non-empty elements must have an end tag

This is wrong:<p>This is a paragraph<p>This is another paragraph

This is correct:<p>This is a paragraph</p><p>This is another paragraph</p>

HTML vs. XHTMLEmpty 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<br>Here comes a horizontal rule:<hr>Here's an image <img src="happy.gif" alt="Happy face">

This is correct:This is a break<br />Here comes a horizontal rule:<hr />

Here's an image <img src="happy.gif" alt="Happy face" />

HTML vs. XHTMLMiscellaneous

XHTML requires a DTD declaration

XHTML requires a reference to the XML namespace in the <html> element<html xmlns=http://www.w3.org/TR/xhtml1>

XML is case sensitive so XHTML tag names and attribute names must be given in lower case

HTML vs. XHTMLMiscellaneous 2

In XHTML, <head> and <body> elements cannot be omitted

First element in the head must be the <title> element

All attribute values must be enclosed in quotation marks, and may not be minimised This is wrong:

<input checked>

This is correct:<input checked=“checked”>

HTML vs. XHTMLMiscellaneous 3

To avoid < and & characters within <style> and <script> elements being interpreted as the beginning of markup, they must contain a CDATA line:<script>

<![CDATA[

… unescaped script content …

]]>

</script>

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 http://www.w3.org

Greg’s Web http://www.arch.usyd.edu.au/~g_smith

W3Schools http://www.w3schools.com