Upgrading to XHTML DECO 3001 Tutorial 1
Download
Report
Transcript Upgrading to XHTML DECO 3001 Tutorial 1
Upgrading to XHTML
DECO 3001 Tutorial 1 – Part 1
Presented by Ji Soo Yoon
19 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. XHTML
Elements 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. 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:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
HTML vs. XHTML
Elements 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. XHTML
Documents 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. XHTML
Documents Must Be Well-formed 2
The basic document structure is:
<html>
<head> ... </head>
<body> ... </body>
</html>
HTML vs. XHTML
All 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. 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<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. XHTML
Miscellaneous
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. XHTML
Miscellaneous 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. XHTML
Miscellaneous 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
Greg’s Web
http://www.w3.org
http://www.arch.usyd.edu.au/~g_smith
W3Schools
http://www.w3schools.com