XHTML Web Page Building Blocks
While Web pages have become
increasingly complex, their underlying structure remains remarkably simple. A Web
page is made up of text content, references to more complex content, and markup to describe how things should be displayed.
Markup information for
the document content is included in the document itself. Markup can include
formatting instructions or details about relationships between parts. Because
the markup is text, the document is universally readable. XHTML has three main
types of markup: elements, attributes, and values.
Elements identify
document structure and can contain text, other elements, or nothing at all.
Attributes contain
information pertaining to an element. In XHTML, attribute values must
always be enclosed in quotation marks.
<img
src="header.png" width="700" />
Elements can be block-level
or inline.
If element X contains element
Y, X is the parent element of Y, and Y is the child element of X.
For example, <p>I
like to be <b>bold</b></p>,
the parent element is the paragraph element (p) and
the child element is the boldface element (b).
XHTML requires that elements
be properly nested, meaning that you cannot terminate a parent element
without terminating the children elements.
Correct: <p>I like to be
<b>bold</b></p>
Incorrect: <p>I like to be
<b>bold</p></b> (need
to end the boldface element first)
The content is basically
anything you can type. There are a few exceptions:
Other non-text elements, such
as links, images, Flash animations, sound files, movies, etc. are directives to
HTML telling it to do something such as go to another URL or import a file into
the page.
Most Web content lives in a
file on disk. A few things to keep in mind about file names:
A URL (uniform resource
locator) is an address of some content that the browser should display. Most
file-based URLs have three parts: scheme, server name, and path.
Here are some other URL
examples:
Absolute URLs specify
the entire path to a file, including the scheme, server name, path, and the
file name itself. Think of this as a complete street address – no matter
where a letter is sent from, the post office will be able to find where to
deliver the message. Relative URLs specify how to get to a resource from
your current location. An analogy would be `go three blocks and turn right.'
Use absolute URLs when
Use relative URLs when
HTML 4 and XHTML 1.0 use the
same elements, attributes, and values – the difference is the syntax.
Advantages of using XHTML:
There are three versions of
XHTML:
You can state the version for
your Web document by using the DOCTYPE declaration. XHTML
validation tools can then determine if your markup is correct for the XHTML
version you chose.
Strict XHTML Page
Declaration
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
</html>
Transitional XHTML Page
Declaration
<!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">
</html>
Frameset XHTML Page
Declaration
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
Visit the World Wide Web
Consortium (W3C) Web site, http://www.w3.org, for more information about DOCTYPE and valid values for DOCTYPE.
Each Web browser has a
default method of displaying each kind of XHTML element. These methods may
differ slightly, but the basic concepts are maintained. For example, a
level-one header (h1) will be larger than a level-three header (h3).
However, the specific
formatting for XHTML elements may not be the same between browsers. For
example, h1 may be 24pt Times on one browser and 22pt Arial on
another. Controlling the display of XHTML elements is done using cascading
style sheets (CSS).
XHTML provides the basic
structure, and CSS defines the appearance of a Web page. A style sheet
is made up of one or more rules. Each rule is comprised of a selector,
which identifies the parts of the Web page that should be affected, and one or
more declarations, which specify the formatting which should be applied.
The simplest selector is the
name of an XHTML element, such as h3 or p. More complex rules can apply to an entire class of elements,
or even all descendants of an element.
p {
font-family: "Helvetica", sans-serif;
font-weight: bold;
color: #3366cc;
}
In the above example, there
is one selector/rule (p), three declarations (font-family,
font-weight, and color), and property
values for each declaration (property values appear after the colons).
Note: CSS requires that opening elements (such as p) have closing elements. Singleton elements such as img are not required to explicitly have a closing element
(e.g., <img
src="file.gif" />).
If more than one style rule
applies to a given element, a cascade principle is used to take into
account inheritance, specificity, and location to determine which rule applies.
Inheritance occurs when a child element takes on properties of its
parents. For example, if you want all h1 elements to
be blue with a red border, any elements within the h1 element will be blue but will not individually have a
red border (because color is inherited, but borders are not). Specificity
means that the more specific the selector, the stronger the rule. For example,
suppose one rule states that all h1 elements
should be blue and a second rule states that all h1
elements whose class attribute is french should
be red. Then the second rule will override the first rule for all h1 elements whose class is french. Note that id attributes
are even more specific than class attributes. Location
is used to break ties between inheritance and specificity. For example, locally
defined rules (within the element itself via the style
attribute) have higher precedence.
Each CSS property has
different rules about what values it can accept:
Predefined values: a finite list of values for a given attribute. For
example, the display property can only be set to block, inline, list-item, or none For example, border: none;.
Lengths and percentages: values with a quantity and a unit, with no spaces
between them. For example, 10px as in font-size: 24px; pixels (px) are
relative to the resolution of the monitor. There are some absolute units, such
as inches (in), centimeters (cm),
millimeters (mm), and points (pt). In
general, these should be used when the size of the output is known (e.g.,
printed page). Percentage values are relative to some other value. For example,
font-size: 80%; means the font for this element is 80% of the
parent's font size.
Bare numbers: a number without a unit. For example, line-height: 1.5;.
URLs: the URL of another file, denoted by url(somefile.ext). For example, background: url(mybackgrund.jpg);. URLs are relative to the location of the style sheet
and not the location of the XHTML document.
Colors: a color for an element, which can be declared in one
of four ways: