Walkthrough: Advanced HTML Editing in Visual Studio for Web Forms Pages

Artigo
09/12/2012

Microsoft Visual Studio provides a rich HTML editing experience for creating Web pages. This walkthrough introduces some of the more advanced HTML editing features of Visual Studio. For an introduction to HTML editing, see Walkthrough: Basic HTML Editing in Visual Studio for Web Forms Pages.

Observação

The examples in this topic are specific to ASP.NET Web Forms pages. However, you can use the HTML formatting options for markup in Web Forms pages, ASP.NET MVC (Model View Controller) views, ASP.NET Web Pages pages, and HTML pages.

Tasks illustrated in this walkthrough include the following:

Specifying options for how the HTML editor displays markup in Source view.
Selecting options so that the HTML editor that you create is compatible with specific schema (markup standards) like HTML5.
Outlining your page — that is, creating collapsible regions in the editor to reduce clutter.

Prerequisites

In order to complete this walkthrough, you need:

A basic understanding of how to work in Visual Studio.

For an introduction to Visual Studio, see Walkthrough: Basic HTML Editing in Visual Studio for Web Forms Pages.

Creating the Web Site and Page

If you have already created a Web Forms project in Visual Studio (for example, by completing Walkthrough: Basic HTML Editing in Visual Studio for Web Forms Pages), go to the next section. Otherwise, create a Web project and page by following these steps.

To create a file system website project

Open Visual Studio.
On the File menu, choose New Web Site.

The New Web Site dialog box appears.

Observação

This walkthrough uses a website project. You could use a web application project instead. For information about the difference between these web project types, see Web Application Projects versus Web Site Projects.
Under Installed, select the programming language that you prefer to work in.
In the templates pane, choose ASP.NET Web Forms Site.
In the Location box, enter the name of the folder where you want to keep the pages of the website.

For example, type the folder name C:\WebSites.
Choose OK.
In Solution Explorer, right-click the website name, and then choose Add New Item.
Under Installed, choose the language you want to work with.
In the Templates Pane, choose Web Form.
Choose Add.

Formatting Markup

The HTML editor provides various 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 the editor automatically closes elements for you. 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, you have ultimate control over the layout and appearance of the markup in the editor. You can format elements manually (for example, by indenting them). The editor leaves your formatting as is unless you explicitly make a request to have the markup reformatted.

In this section of the walkthrough, you change some settings that affect how markup is displayed in the editor and see the effect of those changes. You also learn how to apply formatting to a whole page or to a selection within the page.

To add HTML elements that have default formatting options

Switch to Design view.
On the Table menu, choose Insert Table. Do not change any of the default settings in the dialog box.
Choose OK.

The designer creates an HTML table with two columns and two rows.
Below the table, click the page.
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.
Switch to Source view.

You see that the <table>and <img> elements have been inserted into the page. The <img> element is highlighted.

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

On the Tools menu, choose Options.
Choose Text Editor, expand HTML, and then choose Validation.
In the Target list, choose HTML5.

Observação

Instead of manually choosing a default schema for new pages to be validated against, you could choose Use doctype for validation schema detection. This option would instruct Visual Studio to use the page DOCTYPE declaration to determine the schema to use for validation. In this walkthrough, leave this checkbox cleared so that you can see how the choice of target schema affects how the editor works.
Choose Formatting.

The Client tag and Client attributes dropdown boxes are enabled because you selected HTML5 in the previous step. If you had left the Target setting at XHTML5, these two dropdown boxes would be set to lowercase and disabled because XHTML5 requires lowercase.

Observação

You can set some options separately for specific server tags (ASP.NET server controls) and client tags (HTML elements) by choosing Tag Specific Options. You use this feature later in the walkthrough.
Set the Client tag option to Uppercase.
Clear the Insert attribute value quotes when typing and Insert attribute value quotes when formatting check boxes.
Choose 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 by using the new formatting options

In Source view, scroll to the bottom of the page.
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.
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 now the default.
Type img in lowercase.

IMG appears in the list in uppercase, reflecting the new default casing for tags.
Press the SPACEBAR.

<IMG is entered onto the page in upper case, and a list of attributes for the tag appears. The attributes are in lowercase, because when you set formatting options, you left Lowercase as the default setting for Client attributes.
Type src=.

Normally, the editor provides a set of double quotation marks after the equals sign. However, because you disabled the Insert attribute value quotes when typing option, the editor does not provide them.

Observação

If you enter an attribute value in the Properties window that contains a space, the editor inserts quotation marks, regardless of the options setting.
Type Graphic.gif (a fictitious file name).

The tag now looks similar to the following:
```
<IMG src=Graphic.gif 
```
Type a slash mark (/) and a right angle bracket (>) to close the <img> tag. You can also type a space and a right angle bracket, and the editor supplies the slash automatically.

When you change formatting options, existing markup on a page is not affected. However, you can apply formatting settings manually to a page or to any part of a page.

To apply formatting to existing elements

In Source view, select the first table that you created (the one with the markup in lowercase).
On the Edit menu, choose Format Selection.

The tag names are changed to uppercase.

Observação

The editor does not remove quotation marks, even if you have changed 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.

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. To apply new formatting options to existing markup, use the Format Document and Format Selection commands on the Edit menu.

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 approach is useful if you frequently use certain tags and want to use nondefault formatting for them. Per-tag formatting lets you set the following 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.

Observação

The HTML editor ignores any tag display setting that would change the way tag contents are rendered in the browser.

In this part of the walkthrough, you set several formatting options for tags. Up to this point, you have worked with HTML elements, such as the <table> element. Now, you will work with some ASP.NET web 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 add an HTML table. You then change the rules for tag formatting for table elements and reformat the document to see the effect of changing the formatting rules.

To set tag-formatting rules for an HTML table

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

Observação

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

The Options dialog box appears with the options for formatting that you set in the preceding section.
In the Client Tag list, choose Lowercase to reset the formatting for client tags.
Choose OK to close the Options dialog box.
From the HTML group in the Toolbox, drag a Table control onto the page in Source view.

The editor creates a <table> element that has three rows (<tr> elements) and three cells (<td> elements) in each row. Each tag is on a separate line:
```
<table>
    <tr>
        <td>
            &nbsp;
       </td>
    </tr>
```
In a blank part of the window, right-click, and then choose Formatting and Validation.
Choose Tag Specific Options.
Expand Default Settings.

A list of tag types appears, starting with Client tag does not support contents. Under Default Settings, 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).
Choose 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.
Expand Client HTML tags.
Choose td.

You will set options to change how td tags are formatted.
In the Line breaks list, choose None.
Choose OK to close the Tag Specific Options dialog box, and then choose OK to close the Options dialog box.
On the Edit menu, choose Format Document.

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

Compartilhar via