View
214
Download
0
Embed Size (px)
Citation preview
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