Download Upgrading to XHTML DECO 3001 Tutorial 1

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

Cascading Style Sheets wikipedia , lookup

URL redirection wikipedia , lookup

Transcript
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