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.
.gif) Note |
|---|
| This walkthrough reviews only the formatting features that are unique to working with HTML. As a Visual Web Developer text editor, the HTML editor also supports various options that apply to all text editing, such as setting tab size and line wrap. For information about general text editing options, see Editing Text, Code, and Markup. |
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
-
Switch to Design view.
-
On the Layout 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 three columns and three 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 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
-
On the Tools menu, click Options.
-
Click Validation, and then in the Target list, click Internet Explorer 6.0.
-
Click Format.
You can set some options separately for server tags (ASP.NET server controls) and client tags (HTML elements).
-
In the Client tag list, click Uppercase.
-
Clear the Insert attribute value quotes when formatting and Insert attribute value quotes when typing check boxes.
-
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
-
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 right 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.
-
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 Client attributes as the default setting for Lowercase.
-
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:
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. |
-
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
-
In Source view, highlight to select the first table that you created.
-
On the Edit menu, 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.
.gif) 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
-
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.
-
In the Client Tag list, click Lowercase to reset the formatting for client tags.
-
Click OK to close the Options dialog box.
-
From the HTML group in the Toolbox, drag a Table control onto the page.
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>
</td>
</tr> -
In a blank part of the window, right-click, and then click Formatting and Validation.
-
Click Tag specific options.
-
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).
-
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.
-
Expand Client HTML tags.
-
Click td.
You will set options to change how td tags are formatted.
-
In the Line breaks list, click None.
-
Click OK to close the Tag Specific Options dialog box, and then click OK to close the Options dialog box.
-
On the Edit menu, 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
-
Switch to Design view.
-
From the Standard group in the Toolbox, drag a ListBox control onto the page.
-
Right-click the ListBox control, and then click Show Smart Tag.
-
In the ListBox Tasks dialog box, click Edit Items.
The ListItem Collection Editor dialog box appears.
-
Click Add two times to add two items.
-
Under Members, click the first ListItem, and then under ListItem properties, set Text to Item 1.
-
Under Members, click the first ListItem, and then under ListItem properties,, set Text to Item 2.
-
Click OK to close the ListItem Collection Editor dialog box.
-
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>
-
In a blank part of the window, right-click, and then click Formatting and Validation.
-
Click Tag specific options.
-
In the Tag Specific Options dialog box, click ASP.NET Controls, and then click New Tag.
-
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.
-
Click OK to close the New Tag dialog box.
-
In the Line breaks list, click None.
This will cause the control to have no line breaks in it.
-
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
-
Switch to Design view.
-
From the Standard group in the Toolbox, drag a second ListBox control onto the page.
-
Right-click ListBox, and then click Show Smart Tag.
-
On the ListBox Tasks menu, click Edit Items.
-
For the ListBox control, create two items as you did in the preceding procedure.
-
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.