Years ago, I obtained a copy of HomeSite. HomeSite was a Web development tool created by Nick Bradbury, and it was a great tool as long as you knew HTML. However, if you didn’t know HTML well, you could get lost quickly. HomeSite didn’t have a nice “what you see is what you get” (WYSIWYG) interface like those we enjoy in today’s Web development tools.

Web pages in those days were simple compared to today’s pages, and yet even in those simpler times, it was often difficult to keep track of nested HTML elements such as table cells. As Web pages have increased in complexity and as new HTML elements have been added to our repertoire, it has become even more difficult to comprehend the relationship between a page element and the underlying HTML code.

Tables are an excellent example of this increasing level of complexity. In the days of pure HTML editors, Web developers (no one called them “designers” at that time) kept tables pretty simple. Creating a large nested table structure was just asking for trouble because it would quickly become unmanageable. The advent of WYSIWYG editors removed that barrier, and heavily nested tables became so commonplace that locating the HTML code for a particular table cell was like finding the proverbial needle in a haystack.

Microsoft provided a nice solution to that problem with the introduction of Quick Tag Tools in FrontPage 2003. Fortunately for all of us, Quick Tag Tools were carried over into Expression Web 2. Quick Tag Tools (see Figure 13.1) provide a context-sensitive way of locating and working with specific elements in a Web page.

Figure 13.1. Expression Web 2’s Quick Tag Tools make it easy to locate and work with elements in your Web pages.

The Quick Tag Tools consist of two different sets of tools: the Quick Tag Selector and the Quick Tag Editor. Let’s look at each of these Quick Tag Tools separately and at how you can use them to effectively edit your Web page content.

Note

If you don’t see the Quick Tag Tools, see “Quick Tag Tools Unavailable” in the “Troubleshooting” section of this chapter.

If you’ve ever tried to work with the HTML code in a page with nested elements such as the nested table scenario I mentioned earlier, you’ll no doubt understand how difficult it can be to locate HTML code for a specific element. The Quick Tag Selector in Expression Web 2 makes editing complex pages ridiculously easy by providing a series of context-sensitive buttons for each page element.

As you select different elements in Design View or select code in Code View or Split View, the Quick Tag Selector displays one or more tag selectors in a toolbar above the view, as shown in Figure 13.1.

The Quick Tag Selector works a little differently in Design View than in the other views. As you hover over individual tag selectors, Expression Web 2 will draw a highlighted border around the corresponding page element in the designer, as shown in Figure 13.2.

Figure 13.2. As you hover over tag selectors, Expression Web 2 displays a highlighted border around the corresponding page element.

Not only is this convenient when you’re trying to identify page elements, but it’s also an extremely valuable tool when you are working with CSS elements because it displays CSS classes and IDs as part of the tag selector. Notice in Figure 13.2 that the tag selector for the table indicates that the style1 CSS class was applied to the table.

To select a page element or block of code using the Quick Tag Selector, simply click on the tag selector button. If you are in Design View, the selected page element will be highlighted, as shown in Figure 13.3. If you are in Code View or Split View, the code for the selected element will be highlighted, as shown in Figure 13.4.

Figure 13.3. In Design View, selecting a quick tag selector will highlight the corresponding page element.

Figure 13.4. In Code View or Split View, selecting a quick tag selector will highlight the corresponding code.

If you click the small arrow at the right edge of a selected tag selector or right-click a tag selector, a menu will appear. You can then choose Select Tag from the menu to select the page element or code block. Alternatively, if you choose Select Tag Contents from the menu, only the contents of the tag will be selected and not the tag itself.

Now that you know how to locate and select content using the Quick Tag Selector, let’s look at how to edit your page’s content using the Quick Tag Editor.

The Quick Tag Editor is accessible by either clicking the small arrow at the right edge of a selected tag selector or by right-clicking on a tag selector. The following options are available:

Let’s look at each of these options and learn how to use them to edit your content.

Editing a Tag

Selecting the Edit Tag option in the Quick Tag Editor provides you with a Quick Tag Editor dialog containing the HTML tag, as shown in Figure 13.5. Expression Web 2 provides color-coding and IntelliSense support in this dialog as well.

Figure 13.5. The Quick Tag Editor dialog allows for the editing of a specific HTML tag and is complete with IntelliSense and color-coding.

→	For more information on color-coding, see Chapter 15, “Configuring Page Editor Options,” p. 261.
→	For more information on IntelliSense, see Chapter 7, “Creating Pages and Content,” p. 97.

The easiest way to fully comprehend the Quick Tag Editor is to create a simple page and experiment with the tools.

1. Create a new Web page.

2. Add a new table using the default settings.

3. Place the insertion point inside one of the table cells.

4. Insert a new table inside the first table’s cell using the default settings.

If you now click within the tables you’ve inserted, you’ll see that the tag selectors available will change. Click inside the inner table and you should see a tag selector for both tables. Let’s add an ID attribute to the inner table using the Quick Tag Editor.

1. Right-click the tag selector for the inner table and select Edit Tag from the menu to open the Quick Tag Editor, as shown in Figure 13.6.

   

   Figure 13.6. The Edit Tag option displays the Quick Tag Editor where you can edit the HTML code for the selected element.

2. The insertion point should be just to the right of the <table> tag. Press the spacebar to open the IntelliSense window.

3. Type i to jump to id attribute, as shown in Figure 13.7.

   

   Figure 13.7. IntelliSense support in the Quick Tag Editor allows you to easily and accurately add an ID attribute to the table.

4. Double-click id attribute to add it.

5. Enter innerTable as the value of the ID attribute.

6. Click the checkmark button at the right end of the Quick Tag Editor dialog to commit the new code to the page.

Tip

The Quick Tag Tools disappear from Code View after you make a change to your code. This is by design for performance reasons.

Tip

Instead of clicking the green checkmark button to commit your change, you can simply press Enter on your keyboard.

The Quick Tag Editor does a cursory check on the HTML you enter, and if it’s blatantly invalid, Expression Web 2 will display an error, as shown in Figure 13.8.

Figure 13.8. The Quick Tag Editor displays an error if you attempt to enter obviously incorrect HTML.

Caution

It is possible to enter invalid attributes or other errors that will not cause an error dialog. For example, the Quick Tag Editor will happily allow me to add an attribute to a <p> tag called jim even though there is no such attribute.

Be careful when editing your HTML to avoid accidental errors.

Tip

Even if the Quick Tag Editor approves an edit, Expression Web 2’s Code View may warn you that your code is invalid. Check Code View for any possible problems.

Removing a Tag

The Remove Tag option is a convenient way of removing the selected HTML tag. When you choose this option, only the selected HTML tag is removed. Any content contained within the tag remains.

To use the Remove Tag option:

1. Place the insertion point inside a table cell and enter the text Microsoft.

2. Double-click the text you entered to select it.

3. Right-click the selected text and select Hyperlink from the menu.

4. Enter http://www.microsoft.com in the Address box and click OK.

After completing these steps, Expression Web 2 will insert an <a> tag into the page that links to the Microsoft Web site. To remove that tag:

1. Click the hyperlink you just created in Design View.

2. Right-click the tag selector for the <a> tag and select Remove Tag from the menu.

When the <a> tag is removed, the text for the hyperlink remains. Only the tag that wrapped the text is removed.

Note

If the Remove Tag option is not enabled, see “Remove Tag Not Enabled” in the “Troubleshooting” section of this chapter.

Inserting HTML

The Insert HTML option provides you with a Quick Tag Editor dialog for inserting HTML code into a page. As simple as that may sound, it is sometimes difficult to predict where code will get inserted.

If nothing is selected, code that you insert using the Insert HTML option will be inserted at the insertion point. However, if you have an element selected on the page, the HTML will be inserted immediately before the selected element. Because of this, it is possible to attempt to insert HTML that alone is perfectly valid, but in the context of the selection, the code is invalid. For example, if you select a <td> tag and attempt to insert a <div> before it, you will see the dialog displayed in Figure 13.8 and Expression Web 2 will prevent you from inserting the code.

To insert HTML using the Insert HTML option, follow these steps:

1. Create a new Web page.

2. Right-click the <body> tag selector and select Insert HTML.

3. In the Quick Tag Editor, enter the following HTML:

   <font>Inserted with the Quick Tag Editor</font>

4. Press Enter or click the green checkmark button to add the HTML to the page.

The HTML code you just entered is not standards-compliant because the <font> element is deprecated. The Quick Tag Editor does not prevent you from inserting the deprecated code. It will, however, highlight the code as falling outside the standards in Code View, as shown in Figure 13.9.

Figure 13.9. The Quick Tag Editor will happily insert HTML that falls outside current standards, but Code View will warn you about it.

→	For more information on developing standards-based Web sites, see Chapter 20, “Designing for Compatibility,” p. 353.

Tip

Expression Web 2 will perform only a cursory examination of the HTML code you are entering. It will allow you to enter invalid HTML as well. For example, if you omit a closing tag on an element that requires one, your invalid code will be inserted without warning.

The Quick Tag Editor is a powerful tool for making changes to your HTML code. However, as Spider-Man would say, “With great power comes great responsibility.” Microsoft put a lot of work into ensuring that the code that Expression Web 2 creates is standards-compliant. They did that because professional Web designers asked for a tool they could trust to create pages that would validate against current standards. Using the Quick Tag Editor indiscriminately can quite easily sabotage Expression Web 2’s code. For example, while Expression Web 2 will go to great lengths to keep from generating inline CSS styles that might make it difficult to maintain a page, you are still able to add inline styles yourself and override any styles that Expression Web 2 has already created.

Speaking of CSS, one of the greatest uses for the Quick Tag Editor is making changes to CSS code. For example, applying a CSS class or ID to a specific tag is simple and fast using the Quick Tag Editor. However, you can certainly use the Quick Tag Editor for editing any code. When you do, check Code View often to make sure you haven’t introduced nonstandard code into your page. Remember that Expression Web 2 will not prevent you from shooting yourself in the foot. Keeping your code standards-compliant is up to you.