1.1 XHTML Basics

advertisement
XHTML Basics
What is XHTML?




XHTML is newer than the old HTML
XHTML has stricter rules and does not allow
some elements formerly used in HTML
One benefit of using XHTML is that it helps
make web pages look identical in different
browsers, such as Internet Explorer, Firefox,
Safari, etc.
XHTML is used to define and organize the page
content but not to format or style it.
A basic XHTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
DOCTYPE must be specified on
the first line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The DOCTYPE tells the web browser which
language is being used for the set of instructions
that follow.
In this class, we will be using XHTML Transitional,
which allows us more flexibility than XHTML Strict.
In XHTML, all elements must be in
lowercase (the DOCTYPE line is not an
element.)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Each element must have a
beginning and an end:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Elements must be properly nested:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
What is wrong with this?
<h1>My Favorite Things</h1>
<ul>
<li>Brown <p> paper packages</li>
Tied up with strings</p>
</ul>
What is wrong with this?
<h1>My Favorite Things</h1>
<ul>
<li>Brown <p> paper packages</li>
Tied up with strings</p>
</ul>
The tags are overlapped.
White space doesn’t matter. The browser
will ignore blank lines and multiple spaces:
<ul>
<li>First Item</li><li>Second Item</li>
</ul>
is the same as:
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
We can take advantage of this fact by putting blank
lines and indents in our code to make it easier to
organize and read.
Summary of XHTML Basics:
DOCTYPE must be specified first.
 All elements must be in lowercase.
 Each element must have a beginning and
an end.
 Elements must be properly nested.
 White space doesn’t matter.

Download
Related flashcards
Web colors

17 Cards

Web designers

34 Cards

Create flashcards