Walkthrough: Advanced HTML Editing in Visual Web Developer

The Microsoft Visual Web Developer Web development tool provides a rich HTML editing experience for creating Web pages. This walkthrough introduces some of the more advanced HTML editing features of Visual Web Developer.

Tasks illustrated in this walkthrough include the following:

• Specifying options for how the HTML editor formats elements in the page.

• Selecting options so that the HTML editor that you create is compatible with specific browsers.

• Outlining your page — that is, creating collapsible regions in the editor to reduce clutter.

Prerequisites

In order to complete this walkthrough, you will need:

• A general understanding of working in Visual Web Developer.

For an introduction to Visual Web Developer, see Walkthrough: Basic HTML Editing in Visual Web Developer.

Creating the Web Site and Page

If you have already created a Web site in Visual Web Developer (by completing Walkthrough: Basic HTML Editing in Visual Web Developer), go to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

1. Open Visual Web Developer.

2. On the File menu, point to New and then click Web Site.

   The New Web Site dialog box appears.

3. Under Visual Studio installed templates, click ASP.NET Web Site.

4. In the Location box, enter the name of the folder where you want to keep the pages of the Web site.

   For example, type the folder name C:\WebSites.

5. In the Language list, click the programming language that you prefer to work in.

6. Click OK.

   Visual Web Developer creates the folder and a new page named Default.aspx.

   Note

   By default, Visual Web Developer creates ASP.NET Web pages using the code-behind model. For more information, see ASP.NET Web Page Code Model. In this walkthrough, you will not be using the code-behind page.

Formatting Markup

The HTML editor provides a variety of options to help you format the markup in your pages according to your own preferences. Formatting options include the following:

• Whether tag and attribute names are in uppercase or lowercase letters. You can specify options separately for HTML tags and ASP.NET Web server controls.

• Whether attributes are added by enclosing them in quotation marks.

• Whether elements are closed automatically by the editor. Choices include creating self-closing tags (for example, <br />), creating opening and closing tags (<p></p>), and automatically inserting closing tags.

• How child elements of a tag are indented.

• Where line breaks are positioned around tags.

Regardless of what formatting options you set, an important feature of HTML formatting is that you have ultimate control over the layout and appearance of the markup in the page. You can format elements manually (for example, by indenting them), and the editor leaves your formatting as is unless you explicitly make a request to have the markup reformatted.

In this part of the walkthrough, you will explore different formatting options and see the effect of different settings. You will also learn how to apply formatting to the whole page or to a selection within the page.

In this part of the walkthrough, you will add some simple HTML to the page, change formatting options, and then add more HTML. This illustrates how changing the settings affects how the HTML is formatted.

To add HTML elements that have default formatting options

1. Switch to Design view.

2. On the Table menu, click Insert Table, and then click OK.

   Do not change any one of the default settings in the dialog box.

   The designer creates an HTML table with two columns and two rows.

3. Below the table, click the page.

4. Press ENTER several times to create some blank space, and then from the HTML group in the Toolbox, drag an Image control onto the page.

5. Switch to Source view.

   You will see that the <table> and <img> elements have been inserted in the page.

   By default, the designer creates elements in which the tag and attribute names are lowercase and attributes are enclosed in quotation marks.

You can now change the formatting options.

To change formatting and validation options

1. On the Tools menu, click Options.

2. Click Text Editor, expand HTML, and then click Validation.

3. In the Target list, click HTML 4.01.

4. Click Format.

   The Client tag and Client attributes dropdown boxes are enabled because you selected HTML 4.01 in the previous step. If you left the Target setting at XHTML 1.0 Transitional these two dropdown boxes would be set to lowercase and disabled because XHTML 1.0 Transitional requires lowercase.

   You can set some options separately for specific server tags (ASP.NET server controls) and client tags (HTML elements) by clicking the Tag Specific Options button. You will not set any tag-specific options in this walkthrough.

5. Clear the Insert attribute value quotes when formatting and Insert attribute value quotes when typing check boxes.

6. Click OK to return the editor.

   Notice that although you changed formatting options, the existing markup in the page does not change.

You can now add new elements.

To add HTML elements using the new formatting options

1. In Source view, scroll to the bottom of the page.

2. From the HTML group in the Toolbox, drag a Table control onto the page and position it above the </form> tag.

   This time, the tags in the <TABLE> element are in uppercase letters.

3. Below the table that you just created, position the insertion point, and then type a left angle bracket (<) to start a new tag.

   A list appears in which all the tag names are offered in uppercase, because that is the option that you have set for formatting.

4. In the list, double-click IMG, and then press the SPACEBAR.

   A list of attributes for the <img> tag appears. The attributes are in lowercase, because when you set formatting options, you left Lowercase as the default setting for Client attributes.

5. In Properties, set Src to graphic.gif, which is an invented graphic file name, and make sure that the tag now looks similar to the following:

   <IMG src=graphic.gif 
   

   Because you disable the Insert attribute value quotes when typing option in the preceding procedure, the editor does not automatically enclose the attribute in quotation marks.

   Note

   The editor inserts quotation marks, regardless of the options setting, if the attribute requires them, such as when an attribute value contains a space.

6. Type a slash mark (/) and a right angle bracket (>) to close the <img> tag.

As noted earlier in this section, the formatting options that you set were not applied to existing markup in the page. However, if you want, you can apply formatting settings to the page or to individual elements in the page.

To apply formatting to existing elements

1. In Source view, highlight to select the first table that you created.

2. On the Edit menu, point to Advanced and then click Format Selection.

   The tag names are changed to uppercase.

   Note

   The editor does not remove quotation marks, even if you change the option setting. Similarly, the editor does not change the termination of existing tags, even if you change the option for how to close tags.

You can see from this example how formatting works in the HTML editor. When you use editing tools, such as Toolbox or Properties, to edit elements, the editor uses the current set of formatting options to generate the markup. However, the editor does not change any existing markup. If you want to apply new formatting options to existing markup, you can apply it manually by using the Edit menu commands.

Setting Tag Formatting Options

The formatting options that you have worked with up to this point apply to all elements in the page. If you want, you can specify formatting options for individual tags also. This is useful if you frequently use certain tags and want to use non-default formatting for those tags. Per-tag formatting lets you set the following formatting options:

• How the tags are closed—that is, not closed, self-terminated, or with a separate closing tag.

• How line breaks are used around and within tags.

• How child elements of a tag are indented.

  Note

  Tag-specific formatting rules that you specify can be overridden by the rule that the HTML editor will not change the rendering of tags. If a tag formatting rule would change the way a tag is rendered, the rule is ignored.

In this part of the walkthrough, you will set several tag formatting options and see how the editor works with them. Up to this point, you have worked with HTML elements, such as the <table> element. Now, you will work with some ASP.NET server controls, so that you can see that formatting options apply equally to controls and elements.

You will start by setting some options that apply to all tags of a certain type. You can set options for the following types of elements:

• HTML elements that do not have content, such as br and input.

• HTML elements that can have content, such as table and span.

• Server elements (asp:) that cannot have content, such as asp:image.

• Server elements that can have content, such as asp:textbox.

Security Note:
A TextBox control accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate that user input does not include script or HTML elements. For more information, see Script Exploits Overview.

For the first part of this section, you will add an HTML table. You will then change the tag formatting rules for table elements and reformat the document to see the effect of changing the formatting rule.

To set tag-formatting rules for an HTML table

1. In Source view, in a blank part of the window, right-click, and then click Formatting and Validation.

   The Options dialog box appears with the options for formatting that you set in the preceding section.

2. In the Client Tag list, click Lowercase to reset the formatting for client tags.

3. Click OK to close the Options dialog box.

4. From the HTML group in the Toolbox, drag a Table control onto the page.

   The editor creates a <table> element that has two rows (<tr> elements) and two cells (<td> elements) in each row. Each tag is on a separate line:

   <table>
       <tr>
           <td>
          </td>
       </tr>
   

5. In a blank part of the window, right-click, and then click Formatting and Validation.

6. Click the Tag Specific Options button.

7. Expand Default Settings.

   A list of tag types appears, starting with Client tag does not support contents. By selecting an item in the list, you can set different options for client and server elements, for elements that have content (such as a table element), and for elements that do not (such as an img element).

8. Click Client tag supports contents.

   Notice that the default setting is that tags use a separate closing tag and that the tags have line breaks before, within, and after the tag.

9. Expand Client HTML tags.

10. Click td.

    You will set options to change how td tags are formatted.

11. In the Line breaks list, click None.

12. Click OK to close the Tag Specific Options dialog box, and then click OK to close the Options dialog box.

13. On the Edit menu, point to Advanced and then click Format Document.

    The document is reformatted. The <td> tags in the table that you added are placed in a single line:

    <table>
        <tr>
            <td></td><td></td><td></td>
    

You can work with tag-specific options for an ASP.NET server control.

To set formatting options for an ASP.NET server control

1. Switch to Design view.

2. From the Standard group in the Toolbox, drag a ListBox control onto the page.

3. In the ListBox Tasks dialog box, click Edit Items.

   The ListItem Collection Editor dialog box appears.

4. Click Add two times to add two items.

5. Under Members, click the first ListItem, and then under ListItem properties, set Text to Item 1.

6. Under Members, click the first ListItem, and then under ListItem properties,, set Text to Item 2.

7. Click OK to close the ListItem Collection Editor dialog box.

8. Switch to Source view.

   Notice that the control has been formatted in the following manner:

   <asp:Listbox ID="ListBox1" runat="server">
      <asp:ListItem>Item 1</asp:Listitem>
      <asp:ListItem>Item 2</asp:Listitem>
   </asp:Listbox>
   

9. In a blank part of the window, right-click, and then click Formatting and Validation.

10. Click the Tag Specific Options button.

11. In the Tag Specific Options dialog box, click ASP.NET Controls, and then click New Tag.

12. In the Tag name box, type asp:listitem.

    Do not type the right and left angle brackets (< and >) as part of the tag name.

    You are setting options for the asp:ListItem element that is used inside a ListBox control. You are not setting options for the asp:ListBox element, because you want to control how the contents (children) of the asp:ListBox element are formatted.

13. Click OK to close the New Tag dialog box.

14. In the Line breaks list, click None.

    This will cause the control to have no line breaks in it.

15. Click OK to close the Tag Specific Options dialog box, and then click OK to close the Options dialog box. You can now see the effect of your new formatting options.

To add an ASP.NET server control using the new formatting options

1. Switch to Design view.

2. From the Standard group in the Toolbox, drag a second ListBox control onto the page.

3. On the ListBox Tasks menu, click Edit Items.

4. For the ListBox control, create two items as you did in the preceding procedure.

5. Switch to Source view.

   Notice that the <asp:ListItem> elements are all on one line. The </asp:ListBox> element appears on the next line because tag wrapping is set to 80 characters. You can modify this value in the Options dialog box. Although you worked with only two controls and changed only one formatting option (line breaks), you can see how to apply options to any element that you typically work with.

Outlining Elements

In Source view, you can outline elements (collapse and expand them) so that they are out of your way when you are not working with them. This is particularly useful for elements such as tables, which often take up a lot of space. You can also use the collapse feature for any elements in the page.

To outline elements

1. Switch to Source view.

2. Select one of the tables that you added earlier.

   • If you no longer have the tables, from the HTML group in the Toolbox, drag one onto the page.

3. On the Edit menu, point to Outlining, and then click Hide Selection.

   The <table> tag is collapsed and a plus sign (+) is displayed in the margin.

4. Click the plus sign to expand the table element. You can also configure elements so that the plus (+) and minus (-) signs appear automatically in the margin when the elements exceed a certain size.

To configure how elements are outlined automatically

1. Right-click the page, click Formatting and Validation, click Format, and then click the Tag Specific Options button.

2. In the Tab Specific Options dialog box, expand Client HTML tags, and then click table.

3. Under Outlining in code editor, in the Minimum lines box, enter 5.

4. Click OK, and then click OK.

   For existing tables and any new tables that are added, outlining appears automatically, if the table exceeds five lines.

Validating HTML

The HTML editor can validate your HTML or make sure that it complies with the rules for specific browsers or standards, such as XHTML. For example, the editor can find tags and attributes that are not accepted by Netscape Navigator 4.0 or that do not comply with XHTML standards. In this part of the walkthrough, you will work with different schemas (browser types or standards) and introduce various types of small errors to see how the editor flags the errors.

To test validation in the editor

1. In Source view, open or switch to the Default.aspx page.

2. On the HTML Source Editing toolbar, in the list, click Internet Explorer 3.02/Netscape Navigator 3.0.

3. Scroll to the bottom of the page.

4. Inside the </form> tag, type the following HTML:

   <font face=arial>
   <a href=Default.aspx >Default Page </a>
   </font>
   

   As you type, Microsoft IntelliSense technology provides assistance in completing the tags.

5. On the HTML Source Editing toolbar, in the list, click XHTML 1.0 Transitional (Netscape 7, Opera 7, Internet Explorer 6).

   After a short pause (because validation is performed as a background task), you see red squiggly lines underneath various parts of the tags. Like a spell checker, the HTML validation feature finds markup in your page that is not acceptable for the currently selected browser.

6. In the <font> tag, rest the mouse pointer over the word font.

   A ToolTip informs you that the font element is considered outdated. Current standards now recommend that you use cascading style sheet styles for text formatting. For example, <span style="font-name:Arial;">.

7. In the href attribute of the <a> tag, rest the mouse pointer over Default.aspx.

   A ToolTip informs you that in the current schema, attributes must be enclosed in quotation marks.

8. Enclose Default.aspx in quotation marks.

   The value for the href attribute is no longer underlined. If you use relative references for anchor tags or other tags that require a URL, validation determines whether the target element is available.

9. In the line below the HTML you are working with, type a right angle bracket (<).

   The IntelliSense drop-down list appears, but this time it does not offer font, because the font element is not valid in XHTML schemas.

10. Delete the right angle bracket (<).

Setting Validation Options

You can control the types of errors that validation shows you. This is useful if you want validation to find certain types of errors, even if the errors would be allowed in a particular schema.

To set validation options

1. In Source view, right-click anywhere in the page, and then click Formatting and Validation.

   Note

   The Formatting and Validation command is available only in Source view.

2. In the Options dialog box, click Validation.

   Notice that regardless of whether you select or clear the Show errors check box, the error display for check boxes is not enabled. This is because the current schema is XHTML, which already shows you all possible validation errors.

3. In the Target list, click Internet Explorer 6.

4. Make sure that the Show errors check box is selected, and then under Show errors, select all check boxes.

5. Click OK to return to the editor.

6. Select the HTML that you entered in the preceding procedure, and then on the Edit menu, click Make Uppercase.

   After a brief pause, the tag names are underlined. When you rest the mouse pointer over a tag name, a ToolTip indicates that the name contains uppercase letters. Generally, Internet Explorer 6 allows for uppercase tag names, but you now see this validation error because you have changed the validation options for that schema.

Validation can find many other types of errors also, such as duplicated control IDs, crossed opening and closing tags (for example, <b><i></b></i>), and so on. However, validation in the editor does not prevent you from creating any HTML code that you want. Validation just identifies markup that does not comply with the rules for the specified browser.

You should understand that when an ASP.NET page runs, the resulting output consists not only of the HTML elements that you create, but also of the HTML that is rendered by ASP.NET server controls and any code that writes to the page. Validation cannot examine the output of those dynamic elements; that is, the editor cannot examine the validity of generated output. By default, ASP.NET controls generate output that complies with XHTML 1.1 standards. This means that the output is suited for most browsers. For more information about the markup that is generated by ASP.NET controls, see ASP.NET and XHTML.

Next Steps

This walkthrough has introduced you to some of the more advanced features of the HTML editor. Although the walkthrough did not illustrate every feature, you have seen how formatting options, outlining, and validation can help you produce well-formed, custom-formatted markup, although still giving you final control over the markup.

See Also

Concepts

XHTML in Visual Web Developer

Markup Validation in Visual Web Developer

Other Resources

Editing Text, Code, and Markup

Product Support and Accessibility

Change History