ACSC231
Lecture 3
XHTML Tutorial and Practice
Eleni Michailidou
12/10/2009 ACSC231 - Internet Technologies 1
and Web Page Design
Outline
• Introduction to XHTML
• XHTML Basics
• XHTML Tags
• Tags Explained
• Practice
• Reference Materials:
– [Link]
– [Link]
12/10/2009 ACSC231 - Internet Technologies 2
and Web Page Design
1
XHTML
• stands for EXtensible HyperText Markup
Language
• is almost identical to HTML 4.01
• is a stricter and cleaner version of HTML
• is HTML defined as an XML application
• is a W3C Recommendation
– means that the specification is stable, that it has
been reviewed by the W3C membership, and that
the specification is now a Web standard.
12/10/2009 ACSC231 - Internet Technologies 3
and Web Page Design
Why XHTML?
• Many pages on the WWW contain “bad”
HTML
• The following HTML code will work fine if you
view it in a browser, even if it does not follow
the HTML rules:
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>
12/10/2009 ACSC231 - Internet Technologies 4
and Web Page Design
2
Why XHTML?
• XML is a markup language where everything has to be marked
up correctly, which results in "well- formed" documents.
• XML was designed to describe data and HTML was designed to
display data.
• By combining HTML and XML, and their strengths, we got a
markup language that is useful now and in the future - XHTML.
• XHTML pages can be read by all XML enabled devices AND
while waiting for the rest of the world to upgrade to XML
supported browsers, XHTML gives you the opportunity to write
"well-formed" documents now, that work in all browsers and that
are backward browser compatible
12/10/2009 ACSC231 - Internet Technologies 5
and Web Page Design
How to write XHTML
• XHTML is not very different from the HTML 4.01
standard. So, bringing your code up to the 4.01
standard is a good start.
• One should start by writing HTML code in lowercase
letters, and NEVER skip ending tags (like </p>).
• The Most Important Differences:
– XHTML elements must be properly nested
– XHTML elements must always be closed
– XHTML elements must be in lowercase
– XHTML documents must have one root element
12/10/2009 ACSC231 - Internet Technologies 6
and Web Page Design
3
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>
Note: A common mistake with nested lists, is to forget that the inside list must be within
<li> and </li> tags.
This is wrong: This is correct
<ul> <ul>
<li>Coffee</li> <li>Coffee</li>
<li>Tea <li>Tea
<ul> <ul>
<li>Black tea</li> <li>Black tea</li>
<li>Green tea</li> <li>Green tea</li>
</ul> </ul>
<li>Milk</li> </li>
</ul> <li>Milk</li>
</ul>
Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example
12/10/2009 ACSC231 - Internet Technologies 7
and Web Page Design
XHTML Elements Must Always 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>
12/10/2009 ACSC231 - Internet Technologies 8
and Web Page Design
4
Empty Elements Must Also Be
Closed
Empty elements must either have an end tag or the start tag must
end with />
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="[Link]" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="[Link]" alt="Happy face" />
12/10/2009 ACSC231 - Internet Technologies 9
and Web Page Design
XHTML Elements Must Be In Lower
Case
The XHTML specification defines that the tag names and attributes
need to be lower case.
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
12/10/2009 ACSC231 - Internet Technologies 10
and Web Page Design
5
XHTML Documents Must Have One
Root Element
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.
The basic document structure is:
<html>
<head> ... </head>
<body> ... </body>
</html>
12/10/2009 ACSC231 - Internet Technologies 11
and Web Page Design
XHTML Syntax
• Writing XHTML demands a clean HTML syntax. Some More XHTML Syntax Rules:
– Attribute names must be in lower case
Wrong: <table WIDTH="100%"> Correct: <table width="100%">
– Attribute values must be quoted
Wrong: <table width=100%> Correct: <table width="100%">
– Attribute minimization is forbidden
Wrong: <input checked> Correct: <input checked = “checked”>
– The id attribute replaces the name attribute
Wrong: <img src="[Link]" name="picture1" />
Correct: <img src="[Link]” id="picture1" />
Correct2: <img src="[Link]" id="picture1" name="picture1" />
12/10/2009 ACSC231 - Internet Technologies 12
and Web Page Design
6
XHTML Parts
• An XHTML document consists of three parts:
– the DOCTYPE declaration
– the <head> section
– the <body> section
• The basic document structure is:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
• Note: The DOCTYPE declaration is always the first line in an XHTML document!
12/10/2009 ACSC231 - Internet Technologies 13
and Web Page Design
Document Type Definitions (DTD)
• A DTD specifies the syntax of a web page in
SGML
• An XHTML DTD describes in precise,
computer-readable language, the allowed
syntax of XHTML markup
• There are three XHTML DTDs:
– STRICT
– TRANSITIONAL
– FRAMESET
12/10/2009 ACSC231 - Internet Technologies 14
and Web Page Design
7
DTD Types
• XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
"[Link]
Use this when you want really clean markup, free of presentational clutter. Use this together with
Cascading Style Sheets.
• XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN”
"[Link]
Use this when you need to take advantage of HTML's presentational features and when you
want to support browsers that don't understand Cascading Style Sheets.
• XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN”
"[Link]
Use this when you want to use HTML Frames to partition the browser window into two
or more frames.
12/10/2009 ACSC231 - Internet Technologies 15
and Web Page Design
XHTML Example
• This is a simple (minimal) XHTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
12/10/2009 ACSC231 - Internet Technologies 16
and Web Page Design
8
Practice 1
• Open a new Notepad file and convert the following
bad HTML code to correct XHTML:
<head>
<TITLE>Practicing correct XHTML
</HEAD>
<p> This exercise helps us to
understand how to code following the
XHTML standards <p />
<br>
</BODY>
12/10/2009 ACSC231 - Internet Technologies 17
and Web Page Design
Practice 1 - Solution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html>
<head>
<title>Practicing correct XHTML </title>
</head>
<body>
<p> This exercise helps us to understand how to code
following the XHTML standards </p>
<br />
</body>
</html>
12/10/2009 ACSC231 - Internet Technologies 18
and Web Page Design
9
Practice 2
• Open a new Notepad file and save it as - [Link]
• Write html code so that it follows the XHTML standards
• Make sure that you include:
– Title of the document
– All the three parts of the XHTML document
– The <body> part should include at least:
• Three levels of headings
• A paragraph with some text of your choice
• A Horizontal line
• A break
• An unordered list with 4 items
• An ordered list with 3 items
– Include comments: <!-- This is a comment -->
• Use:
– [Link]
– [Link]
12/10/2009 ACSC231 - Internet Technologies 19
and Web Page Design
Practice 3
• Answer Question Sheet 1
– These questions will be in midterms and
final exam so you need to know them.
– The answers can be found in the lecture
slides up to this one.
12/10/2009 ACSC231 - Internet Technologies 20
and Web Page Design
10