Using XHTML in Dreamweaver 8


The W3C recommendation for HTML 4.01, the last version of HTML, was officially released in December 1999. In January 2000, rather than make any further revisions to HTML, the W3C released XHTML, which is very similar to HTML but uses the stricter syntax of XML. XHTML is easy to learn, and provides a means to write code that is compliant with current World Wide Web Consortium (W3C) standards. Both HTML and XHTML are supported in current browsers. For more details on XHTML syntax, see the sidebar "XHTML Syntax."

Dreamweaver automatically uses valid XHTML syntax when you create new XHTML documents or convert an existing HTML document to XHTML. In the exercises in this section, you'll create a new XHTML document and convert an HTML document to XHTML.

XHTML Syntax

There are only a few major rules, but you must follow them if you want to create a valid XHTML document:

  • Every XHTML document must include a DOCTYPE declaration.

    A DOCTYPE tells a browser which language and version was used to create the document. The following code is an XHTML 1.0 Transitional DOCTYPE:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 

    When you create new XHTML documents in Dreamweaver 8, you can choose from four different XHTML DOCTYPES: XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML 1.1, and XHTML Mobile 1.0.

  • The root element of the XHTML document must be html, and it must include an XHTML namespace:

    <html xmlns="http://www.w3.org/1999/xhtml">

    The root element contains all the elements on the page. Including an XHTML namespace means that the vocabulary used in the documentthe names of the tags and attributesis XHTML.

  • Every tag in an XHTML document must be closed.

    Every opening tag needs a closing tag, and empty tags (tags that don't contain any content), such as br, hr, and img tags, must be closed with a slash: <br />, <hr />, <img />

    The extra space before the slash is used to prevent errors when XHTML documents are opened in older browsers that don't support XML.

  • All tags must be nested correctly.

    If you are nesting tags, close the tags in reverse order from the order in which you opened them. The first tag opened must be the last tag closed. For example, if you use a p tag and a b tag:

     <p><b>And then she heard a loud noise from behind.</b></p> 

    You must close the b tag before you close the p tag.

  • All XHTML tags and attribute names must be in lowercase.

    In HTML, Body, BODY, and body are all valid tags. In XHTML, you must use body.

  • All attribute values must be in quotation marks.

    Although <body bgcolor=red> is valid HTML, to specify a background color for a page in XHTML, you must use quotes for the value of the bgcolor attribute: <body bgcolor="red">.

For more details on XHTML in Dreamweaver, see "About the XHTML code generated by Dreamweaver," in Dreamweaver Help (F1).


To create a new XHTML document:

1.

From the main Dreamweaver menu, choose File > New > Basic page > HTML.

2.

In the New Document dialog that appears, select one of the four XHTML document types from the Document Type (DTD) drop-down list in the lower right (Figure 14.1).

Figure 14.1. Choose a basic HTML page with an XHTML DOCTYPE in the New Document dialog.


3.

Click the Create button to close the dialog and create the page.

Tip

  • XHTML files are a type of HTML document and include an .html or .htm filename extension.


To make XHTML the default choice for new HTML documents:

1.

From the main Dreamweaver menu, choose Edit > Preferences.

The Preferences dialog appears.

2.

From the Category list on the left, select New Document (Figure 14.2).

Figure 14.2. To specify a preference for new document type, select New Document from the Category list in the Preferences dialog.


3.

From the Default Document drop-down list, select HTML.

(XHTML files are HTML documents.)

4.

In the Default Extension field, type .html or .htm, whichever filename extension you prefer.

5.

From the Default Document Type (DTD) drop-down list, select one of the four XHTML document types (Figure 14.3).

Figure 14.3. Select a default document, filename extension, and document type in the New Document pane of the Preferences dialog.


If you are new to XHTML, you will probably want to choose XHTML 1.0 Transitional as your default document type. XHTML 1.0 Transitional is the least strict of the XHTML document types.

6.

From the Default Encoding drop-down list, select an encoding type. The encoding type specifies which encoding is used for characters in the document. If you create pages in English, choose Western European from the list. Otherwise, choose the appropriate language.

Alternatively, you can choose Unicode (UTF-8) for your encoding type. Unicode is the standard international encoding type used to represent the characters in all languages. There are currently more than 96,000 Unicode characters.

7.

If you want the encoding type you chose in Step 6 to be used when opening files that don't specify an encoding type, check the "Use when opening existing files that don't specify an encoding" box (Figure 14.4).

Figure 14.4. Select a default encoding type in the New Document pane of the Preferences dialog.


A valid document follows the rules for its document type. Valid HTML or XHTML documents must include an encoding type.

8.

If you choose Unicode (UTF-8) in Step 6, select one of the four Unicode Normalization Forms from the Unicode Normalization Form drop-down list.

For more information on Unicode Normalization, see Dreamweaver Help (F1) and the Unicode site (www.unicode.org).

You can also include a Unicode Byte Order Mark (BOM) by checking the Include Unicode Signature (BOM) box.

9.

If you want to automatically create the document type you specified in this dialog when you press Control-N (Windows) or Command-N (Macintosh), uncheck the "Show New Document dialog box on Control + N" box (Figure 14.5).

Figure 14.5. Choose a Unicode Normalization Form if you selected Unicode (UTF-8) as your default encoding type.


10.

Click OK to save your New Document preferences.

To convert an HTML document to an XHTML document:

1.

Open any HTML file, or download the files in the Wright folder from the Web site for this book at www.peachpit.com/dw.vqp, and open Wright.html in Dreamweaver.

2.

From the main Dreamweaver menu, choose File > Convert > XHTML 1.0 Transitional (Figure 14.6).

Figure 14.6. From the File menu, select Convert > XHTML Transitional 1.0 to convert an HTML file to an XHTML 1.0 Transitional file.


Dreamweaver converts the HTML document to an XHTML document by changing the DOCTYPE declaration, and converts all tag and attribute names to lowercase, adds quotation marks to attribute values, adds closing tags, and adds slashes to empty tags.

3.

Choose File > Check Page > Validate Markup (Figure 14.7).

Figure 14.7. From the File menu, select Check Page > Validate Markup to validate the new file as XHTML.


It's a good idea to validate the new file. Although Dreamweaver's file conversions are usually accurate, if closing tags are missing in the HTML file, Dreamweaver may not be able to determine where the content of a tag ends. In this case, Dreamweaver may add closing tags at the wrong position in the code. You can check this by validating the filechecking the file to see if it follows the rules for its document type. These rules are defined in a Document Type Definition (DTD) file. The URL for the DTD file is included in the DOCTYPE statement.

4.

Check the validation results on the Validation panel of the Results panel group (Figure 14.8). Make any changes, if necessary.

Figure 14.8. Check the Validation results in the Validation panel of the Results panel group.


5.

Save the file.

You've converted an HTML document to an XHTML document, and validated the XHTML file to make sure the conversion is accurate.

Tip

  • For more information on validation, see "Validating and Testing Your Code" in Chapter 3.





Macromedia Dreamweaver 8 Advanced for Windows and Macintosh. Visual Quickpro Guide
Macromedia Dreamweaver 8 Advanced for Windows and Macintosh: Visual QuickPro Guide
ISBN: 0321384024
EAN: 2147483647
Year: 2004
Pages: 129
Authors: Lucinda Dykes

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net