Skip to content Skip to navigation

OpenStax-CNX

You are here: Home » Content » Web Programming Quick Start: XHTML -- Creating an Initial XHTML File

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

Web Programming Quick Start: XHTML -- Creating an Initial XHTML File

Module by: Ronald Sawey. E-mail the author

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.

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.

Figure 1: Dreamweaver's New Document Dialog Box
Figure 1 (dw1a.gif)
Choose "Basic page" from the Category column and "HTML" from the Basic page column, and click on: create.gif.

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
Figure 2 (dwterms1.gif)

To get a look at the XHTML code generated by Dreamweaver, click on the code.gif button, on the Document Toolbar. Figure 3 shows the resulting Document Window.

Figure 3: Dreamweaver's Initial XHTML
Figure 3 (code1.gif)
demo1.html shows the file thus far. View/Page Source (in the Firefox browser) will show the XHTML code.

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: Blank line for readability.
  • 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"
Figure 4 (code1a.gif)

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.

Figure 5: Adding text to the body and changing the title
Figure 5 (code2.gif)
Figure 6: Browser view for demo2.html
Figure 6 (browser1.gif)
demo2.html shows the file thus far. Recall, View/Page Source (in the Firefox browser) will show the XHTML code.

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.

Figure 7: Adding <p> and </p> to each Paragraph
Figure 7 (code3.gif)
Figure 8: Browser view for demo3.html
Figure 8 (browser2.gif)
demo3.html shows the file constructed thus far. Recall, View/Page Source (in the Firefox browser) will show the XHTML code.

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.

Figure 9: Adding <strong> and <em> tags
Figure 9 (code4.gif)
Figure 10: Browser view for demo4.html
Figure 10 (browser3.gif)
demo4.html shows the file. Recall, View/Page Source (in the Firefox browser) will show the XHTML code.

Conclusion

The following might also be helpful:

  • Links to the other modules in this "Web Programming Quick Start" series are available
  • Links to other screen recordings for these modules are also available (time permitting).

Content actions

Download module as:

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks