Lesson 2. Upgrading to XHTML

In the previous chapter's assessment tasks, you identified two categories of problems that need addressing in this site revision: outdated code and mismatches between the existing site and the business processes it should support. In this lesson, you'll take care of the first of these problems: You'll convert the site to XHTML. It will take the rest of the book (and more) to take care of the business process issues. Before jumping into building dynamic Web applications, though, you should first take care of the code issues. This way, rather than proliferating the existing code problems, you can eliminate them up front.

I'll delve into the specifics of XHTMLwhat it is and what code needs to be changed to get thereinside the lesson itself. For now, let's take a look at the big-picture task of upgrading code. Because of the similarities between HTML and XHTML, the primary task of this chapter is to find outdated code and replace it with current code. Strictly speaking, the simplest way to do this is to use Dreamweaver's conversion feature (File > Convert > XHTML). However, we're going to use Find and Replace instead. Why bother with this when there's an easier alternative? The lesson covers several critical Dreamweaver skills. You should read this lesson to learn about the following:

HTML in general. Those rusty with HTML or who want some practice refreshing their memory with it will benefit from the HTML code orientation of this chapter.
XHTML in particular. Those new to XHTML, not sure how it differs from HTML, or not understanding why XHTML is so important will know all of this by the end of the lesson.
The power of Find and Replace. Most Dreamweaver users have dabbled with it, but few take the time to master what is one of Dreamweaver's most powerful automation and productivity tools.
The site we'll be using throughout the book. Working through the site in this lesson will make you intimately familiar with the current pages at the code level. Dynamic web site development is intrinsically code-oriented, especially as taught in this book, and it will make more sense to you if you have worked through this lesson.

Dreamweaver's Find and Replace dialog is a powerful utility that automates large-scale changes, such as upgrading to XHTML.

graphics/02fig01.gif

If you have already mastered hand-coded XHTML and understand the directions the W3C is taking XHTML, and you have considerable experience working with the more advanced and out-of-the-way features of the Find and Replace dialog, then you can skip this lesson and move onto Lesson 3. Before you go, however, open each page in Dreamweaver, and one at a time, choose File > Convert > XHTML to upgrade it to XHTML.

Word processor users are probably familiar with the Find and Replace function. Using a simple dialog, you specify the string that needs replacing and the string to replace it with. At its core, Dreamweaver's Find and Replace function works the same way. But Web sites are different from word processor documentssite content is spread out across files, strings can be either document text or document code, and so on. Dreamweaver's Find and Replace dialog offers a host of options that enable you to customize the tasks in ways that result in unbelievable productivity gains.

Dreamweaver's Find and Replace dialog also has another feature, called regular expressions, which enables you to search for text patterns, rather than specific strings of text. Regular expressions use placeholder characters that represent other characters. They are useful when you want to search for a certain kind of text, without being able to specify the exact text itself. For example, imagine you wanted to search for email addresses, or verify that an email address has been entered. You obviously can't spell out for Dreamweaver every email address that has ever been (or ever could be) entered, but all valid email addresses have the following syntax: username@domain.com (or other extension, such as .org or .edu). And thanks to regular expressions, you can tell Dreamweaver to look for a pattern that meets the following criteria: "find any text string without spaces, followed by an @ character, followed by another text string without spaces and including zero or more period characters (.), followed by a period character (.), followed by another text string of up to three characters without spaces." Such directions would find any valid email address. Unfortunately, regular expressions are hard to use. For example, the regular expression to catch any email address looks as follows:

[View full width]
^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))(
[a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$

Source: Todd Moon at http://www.regxlib.com

Many regular expressions aren't quite so crazy, but can still be hard to use. Fortunately, Dreamweaver has built in the equivalent functionality of dozens of regular expressions in the Find and Replace dialog. You'll work with quite a few of these built-in search expressions in this lesson, and you'll see how their power can add to your productivity.

Find and Replace is obviously a powerful productivity tool, and its applicability extends beyond upgrading HTML sites to XHTML. For example, Find and Replace would be an ideal solution for changing a navigation bar sitewide, dealing with a company name change (e.g., a law firm that adds a new partner), or updating the address in every page's footer.

The power of Find and Replace notwithstanding, you might be wondering how you can be sure that you didn't overlook anything, that the site really is, in fact, XHTML-compliant. At the end of the lesson, you will validate your pages using Dreamweaver's Validator, proving that your pages are fully XHTML-compliant. If the Validator catches any deviations, it will show you exactly where the problem occurredand any problems you find will be, of course, only a Find and Replace away from correct.

WHAT YOU WILL LEARN

In this lesson, you will:

Learn about the relationships among HTML, XHTML, XML, and CSS
Replace obsolete HTML tags with their XHTML counterparts using Find and Replace
Use Dreamweaver's Specify Tag/Action utility to find and replace sophisticated text patterns
Force Dreamweaver to write XHTML code, rather than HTML code, henceforth
Validate the XHTML code using Dreamweaver's built-in code validation utility

APPROXIMATE TIME

This lesson takes approximately one hour and 30 minutes to complete.

LESSON FILES

Starting Files:

Lesson02/Start/newland/about.htm

Lesson02/Start/newland/contact.htm

Lesson02/Start/newland/index.htm

Lesson02/Start/newland/profiles.htm

Lesson02/Start/newland/tours.htm

Completed Files:

Lesson02/Complete/newland/about.htm

Lesson02/Complete/newland/contact.htm