Web based School

XHTML Documents

XHTML documents have a simple, common structure that forms the basis for designing all Web pages. This basic structure of tags is shown in the following listing with associated tags described in the following sections.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>A Web Page</title>
</head>
<body>
   .
   page content goes here
   .
</body>
</html>

As you begin coding an XHTML page you can start with this template. In fact, you may wish to create this document and save it as a template file. Then, when you start a new page, simply open this document, save it under the name of the new page, and continue coding for the particular information to appear on that page.

The Prolog

As meantioned previously all XHTML documents should begin with the prolog lines

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.dtd">

The first line indicates that this document is based on XML version 1.0 standards. The following lines point to the Document Type Definition against which page coding will be validated.

The <html> Tag

The <html>...</html> container tag surrounds all XHTML coding in the document. This tag indicates that the enclosed information contains XHTML coding and should be rendered as such in the browser. In conformance with XHTML standards, the opening tag includes a reference to the location namespace of the validation standards to be applied to this document, along with attributes that specify the language used (English in this case):

The <head> Tag

The <head>...</head> container tag encloses the head section of the XHTML document. The head section supplies a title for the document (see below) along with other information related to formatting and indexing of the document. For present purposes, only a title appears in the head section. Other tags that can be included in the head section are discussed as needed.

The <title> Tag

The <title>...</title> container tag gives a title to the document. This tag encloses a string of text that appears in the browser's Title Bar when the page is opened. The <title> tag is optional but provides helpful identification information to the person visiting the various pages of your Web site.

The <body> Tag

The bulk of the coding of an XHTML document appears in the body section surrounded by the <body>...</body> container tag. Only information appearing inside this tag is displayed in the browser window. In its simplest form, the body section contains plain text that is displayed in the default font style inside the browser window. Browsers normally display text using Times New Roman font face at approximately 12-point size.

All Web pages begin with this basic document structure. Then the <body> of the document is expanded with text and other page elements that are to be displayed inside the browser window. Various arrangements of these display elements and control over their appearance are accomplished by enclosing them within additional XHTML tags. As you proceed through this tutorial you will learn these tags and associated attributes to produce Web pages of virtually any design and content you desire.

Coding XHTML Documents

As a Web page author you begin your work by composing an XHTML document containing the information you wish to appear on a Web page. This document is created on your desktop PC.

In order to view your work it is not necessary to be connected to the Internet or to be linked to a server on the World Wide Web. You can do all your work locally. If you happen to have an account with an Internet Service Provider (ISP) that provides personal home directories, then you can copy documents to your directory for viewing on the Web. For purposes of this tutorial, though, you can create Web pages on your computer's hard drive or diskette and view the pages through your browser.

Choosing a Browser

Most of the Web pages created in these tutorials work correctly under either Microsoft Internet Explorer or Netscape Navigator. You should download the latest versions of these browsers. Differences between the browsers and their renderings of Web pages are described as necessary. The tutorials themselves were written to work under Internet Explorer.

Text Editing with Notepad

XHTML documents are created with text editors or with special HTML editors designed for that purpose. For these tutorials it is sufficient to use a simple text editor such as Windows Notepad. This program is usually found under the Start-->All Programs-->Accessories menu. After opening this application, you enter the text and other page elements that you wish to display, surrounding them with XHTML tags for layout and styling.

The following illustration shows the Notepad application with coding for a very simple Web page. The page has a title that appears in the browser's Title Bar and a single sentence that appears in the browser window.

Text and coding is typed into the editor in free-format style. That is, blank spaces, tabs, indents, and other document editing techniques can, and should, be used to make the document readable in the editor. These editing layouts are ignored by the browser, which only pays attention to the XHTML tags for page layout and formatting instructions. The above code, for example, would be displayed properly in the browser if it were entered in the editor like this:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.dtd"> <html><head xmlns="Http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><title>A Web Page</title></head><body>Page contents go here.
</body></html>

However, it is easier to compose and edit the document and to understand the layout of the page by spacing its tags and text in a more readable format. This is an important consideration. Take great care in alignment and indention of code so that visually it represents the structure of content that displays in the browser. Sloppy code inevitably leads to errors. You should choose a monospace font such as Courier New for displaying your code in Notepad. The monospace font will better able you to align lines of text in the editor.

XHTML coding is an exacting art and science. Accuracy of coding is paramount and you need to work with close to 100% accuracy. The browser doesn't know what you "wish" to do; it can only do what you explicitly tell it. At first, coding will be tedious and time consuming. As you gain practice, though, you should be able to type and edit XHTML code with not much more difficulty than straight text.

Saving an XHTML Document

Once you have completed coding the XHTML document you need to save it so that it can be retrieved and displayed inside a browser. The document can be saved to a diskette or you can create a folder on your hard drive for storing Web documents.

You can choose any file name you wish for your Web document, although you should not include any blank spaces or special characters in the name. You also need to make sure that you save the document with the .htm file extension. This extension identifies the document as a Web page and is needed for the browser to recognize it as such. If you are using Windows Notepad as your editor, make sure you select All Files (*.*) from the drop-down menu as the file type. Otherwise, Notepad adds an extra ".txt" extension to the file name and the document will not be recognized properly by the browser.

Text Editing with WordPad

Some Web page authors prefer to use Windows WordPad rather than Notepad for XHTML editing. WordPad gives you a few more editing options such as font display choices and tab settings. HTML should be edited under a monospaced font such as Courier New at 9-point font size; 1/4 inch (.25) tab settings give good visible indentation for the document. The editing process is virtually the same as with Notepad.

When saving a document with WordPad there are several choices of file formats. Be sure you save the document with the .htm file extension and that it is saved as a "Text Document" file type.

Displaying an XHTML Document

The saved HTML document with the .htm extension is now ready to be viewed in your browser. You can open the document directly in the browser by double-clicking its icon, or you can open your browser and use the File menu to navigate to the correct drive, folder, and document. When the document is loaded into the browser, the address appearing in the Address, or Location, box of your browser indicates this path to the document.

Document Editing and Display

When composing a lengthly Web page, it is not necessary to code the entire page at one time. You can code a few lines, save the document, view the page in the browser, and then return to composing the next section of code. In other words, you can switch back and forth between the editor and the browser as you put together your Web page. Just remember to start with the document structure described earlier so that you are editing a complete, valid Web document.

To facilitate this sort of page development, leave both your editor and browser open on the desktop so that they are accessible in the Task Bar. Then you can making changes or corrections to your document and switch immediately to your browser to refresh and view the updated page.

The following illustration shows the computer screen with both Notepad and Internet Explorer opened at the same time on the desktop. It is now a simple matter of clicking in the Notepad window to edit the Web document. After saving the changes click in the Internet Explorer window and click the "Refresh" button to reload the changed document. Then switch back to Notepad to continue with page development.