Web Programming Quick Start: XHTML -- Creating an Initial XHTML File
Summary: This module discusses the creation of an initial XHTML file. The basic structure of any XHTML file is discussed and the <html>, <head>, <title>, <body>, <p>, <strong> and <em> tags are discussed.
Module Map
Introduction
The primary goal of this "Web Programming Quick Start" series is to get
the reader to the point of doing something productive
with a minimum of time and effort. It is not
intended to be an exhaustive treatment/reference of any of the subjects discussed.
This is also very much a work in progress. All comments, criticisms, suggestions, etc. are most
welcome.
In the series of modules on XHTML (eXtensible HyperText Markup Language)
and CSS (Cascading Style Sheets), we
will
be following the "current wisdom" on web page construction and design as exemplified by the three excellent web-related books of
Rachael Andrew. Specifically, we will endeavor to keep the
content and the styling/formatting of the web documents
separate.
A screen
recording,
demonstrating the material in this module
is also available (time permitting).
Dreamweaver
Although the work discussed here
can be done with any text editor, and there are also many X/HTML generators, we will use
Adobe's Macromedia Dreamweaver 8 for
generating our HTML. However, at each step, we will discuss the XHTML code, generated by Dreamweaver.
One reason for using
Dreamweaver in this discussion is that it will be very helpful when we discuss Cascading Style Sheets (CSS).
Once you have started Dreamweaver (we are assuming a Microsoft Windows operating system), click on: File/New on the menu bar.
Figure 1 shows the resulting dialog box.
Choose "Basic page" from the Category column and "HTML" from the Basic page column, and click on:
.
 Figure 1: Dreamweaver's New Document Dialog Box |
.
Figure 2 shows the Dreamweaver working environment.
Throughout this "Web Programming Quick Start" series
as we discuss XHTML generation by Dreamweaver, we will use the terms shown in this figure.
 Figure 2: Dreamweaver's Working Environment |
To get a look at the XHTML code generated by Dreamweaver, click on the 
button, on the
Document Toolbar. Figure 3 shows the resulting Document Window.
demo1.html shows the file thus far. View/Page Source (in the Firefox browser) will show the XHTML
code.
button, on the
Document Toolbar. Figure 3 shows the resulting Document Window.
 Figure 3: Dreamweaver's Initial XHTML |
The "Sine Qua Non" XHTML Tags
We now discuss each line of the XHTML code shown in Figure 3. Although there are comments associated with
lines 1, 2
and 4, they are not the primary focus here.
The "<" and ">" angle brackets, along with the text contained between them are called "tags," e.g.
<body> .
- Line 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XH...>tells the browser what kind of file follows. We will omit a detailed discussion at this point. - Line 2:
<html xmlns="http://www.w3.org/1999/xhtml">The < html part begins the XHTML "tags," and the remainder of the line, provides information to the browser concerning the "XML Namespace" associated. As with Line 2, namespace discussion is beyond the scope of our work, and both lines 1 and 2 should be taken as "boilerplate." - Line 3:
<head>This begins the "head" section of the web document. This section contains material that does not appear in document window of a browser, but generally contains information used by the browser. - Line 4:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />As with lines 1 and 2, we take this as "boilerplate," generated by Dreamweaver to make the code XHTML compliant. - Line 5:
<title>Untitled Document</title>Text contained between <title> and </title> tags appears in the title bar of the browser. Our next step will be to change this to something more "meaningful." - Line 6:
</head>This ends the head section of the document - Line 7:
- Line 8:
<body>This begins the "body" section. This is where the material appearing in the browser window is specified. - Line 9:
</body>Closing of the body of the document. Since there is nothing between the beginning and the end of the body tags, the browser will show a blank document - Line 10:
</html>This final tag closes the XTHML document, as well as closing the <html> tag opened in line 2.
Note:
After Line 1, each tag discussed has an opening, < ... >, and a closing </...> tag. This is true of all
XTHML tags
that contain text between their opening and closing, i.e. "non-empty" tags.
To emphasize the overall structure, Figure 4 shows the XHTML tags without the recommended "boilerplate," that is
required to make the file an XHTML file, rather than an HTML file.
 Figure 4: Dreamweaver's Initial XHTML, without "boilerplate" |
Let's now put two paragraphs in the body of our document and change the text between the title tags. We will get our
paragraphs of text
from lipsum.com. Figure 5 shows the XHTML code and Figure 6
shows the result displayed in the Firefox browser.
demo2.html shows the file thus far. Recall, View/Page Source (in the Firefox browser) will show the
XHTML code.
 Figure 5: Adding text to the body and changing the title |
 Figure 6: Browser view for demo2.html |
You will notice that although the two paragraphs in the source code (demo2.html) are separated by a blank line, they appear as one
in the browser. This demonstrates an important point: Browsers put all text together unless specified otherwise by XHTML code.
Blank lines are ignored, and the text is "flowed" to fit the browser window.
Although it is not shown here, all consecutive blanks and/or tabs are represented by a single space in the
browser, unless specified otherwise by XHTML code.
Figure 7 shows the insertion of the <p> and </p>, "paragraph," tags
at the beginning and end of each of the two paragraph and Figure 8 shows the result in the Firefox browser.
demo3.html shows the file constructed thus far. Recall,
View/Page Source (in the Firefox browser) will show the
XHTML code.
 Figure 7: Adding <p> and </p> to each Paragraph |
 Figure 8: Browser view for demo3.html |
The <strong> and <em> Tags
We will conclude this section by discussing two more XHTML tags for "emphasizing" certains segments of text. These are the
<strong> and <em> and tags. To distinguish between the two,
Andrew (p. 66) suggests the following:
"Think of <strong> as a loud, slow voice, and and <em> as a raised tone of voice."
Figure 9 shows the insertion of the <strong> and <em> tags. <em> is used in the first paragraph
and <strong> is used in the second paragraph, and Figure 10 shows the result in the Firefox browser.
demo4.html shows the file. Recall, View/Page Source (in the Firefox browser) will show the XHTML
code.
 Figure 9: Adding <strong> and <em> tags |
 Figure 10: Browser view for demo4.html |
More about this content: Metadata | Version History | Cite This Content
This work is licensed by Ronald Sawey. See the Creative Commons License about permission to reuse this material.
Last edited by Ronald Sawey on Jan 3, 2007 6:57 am US/Central.