The basic XHTML page
All XHTML pages must conform to the standard structure. There are three varieties
of XHTML (Frames, Transitional and Strict), but we will only look at the most rigorous version (Strict),
as the others are
there to simplify the process of maintaining older websites and converting them to
more recent technologies. If we are interested in creating new sites, we will
want to take advantage of a more rigorous definition.
The code for a basic XHTML Page is show below:
<!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"
lang="en" xml:lang="en">
<head>
<title> -- page title goes here -- </title>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
-- page content goes here --
</body>
</html>
A breakdown of this basic page highlights the key elements.
The first line defines the nature of the file. It declares
what sort of document this is by referring to a Document Type Definition (DTD).
The DTD simply points to a location where a complete specification of the document
format can be found. In this case the DTD refers to a definition of XHTML 1.0 Strict.
The World Wide Web Consortium (W3C) maintains DTDs for all the versions of HTML,
going back through several generations. All we need to know is that we must include
this line, and if you use the New Web Page wizard in NoteTab Light it will automatically
create the skeleton XHTML file for you (see the later note).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The XML definition for XHTML specifies a set of elements which must appear in the
correct sequence within the document. An XML element is usually made up of a start
tag, followed by some content, followed by an end tag. In this case we have an
html element made up of the start tag (<html>) and the end tag (</html>),
with its content being two other elements (the head and the body). The start tag
has extra information pointing to a definition of all the available elements within
the language, plus a language identifier (in this case 'en' = English). Again,
NoteTab Light will generate this automatically.
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
The head element contains as a minimum a title element (usually used by
a browser to identify the page in its title bar) and a Character encoding.
However, you will usually include
a <link> element to connect your page to a Style Sheet. In this example the
Style Sheet is called "mystyles.css" and is located in the same folder as the web
page. However, the Style Sheet can be located anywhere on the Internet as long as
you specify the complete URL. However, it is frowned upon to link to other websites'
Style Sheets.
<head>
<title> -- page title goes here -- </title>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
The body element contains all the data for display in the web page. This will use
other XHTML elements to structure the data on the page.
<body>
-- page content goes here --
</body>
Finally we end the XHTML document with the end of html tag (</html>).
</html>
Note about using the New Web Page wizard in NoteTab Light
If you have not followed the configuration
guidance for NoteTab Light you will need to do some manual modifications to
make the file conform to the XHTML Strict standard.
The New Web Page wizard attempts to include elements within the basic blank page
which are strictly not part of the XHTML standard, as well as some additional items
which are not essential but do provide extra information about the web page. The
first page of the Wizard should be filled in, though you only need to specify the
Document Type and the Character set. However, the second page of the wizard should
be cancelled to prevent the inclusion of invalid styling attributes. The wizard
does not include the language specifier in the <html> tag, so this will need
to be added manually. You should remove all elements between the <body> and
</body> tags to leave you with an empty page.