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

Microsoft Visual Studio 2012 provides a rich HTML editing experience for Web Forms pages. The Visual Studio HTML editor lets you work in WYSIWYG mode and also lets you work directly with HTML markup for finer control. This walkthrough introduces you to the HTML editing features of Visual Studio.

Tasks illustrated in this walkthrough include the following:

• Creating and editing HTML in Design view.

• Creating and editing HTML in Source view.

• Using Split view.

• Using navigation tools to move quickly through your HTML tags.

In order to complete this walkthrough, you need the following:

• Visual Studio or Visual Studio Express for Web installed on your computer. 

  Note

  If you are using Visual Studio, the walkthrough assumes that you selected the Web Development collection of settings when you started Visual Studio the first time. For more information, see How to: Select Web Development Environment Settings.

• A general understanding of how to work in Visual Studio.

  For an introduction to how to create Web Forms pages in Visual Studio, see Walkthrough: Creating a Basic Web Forms Page in Visual Studio.

If you have already created a Web Forms site in Visual Studio or Visual Studio Express for Web (for example, by completing Walkthrough: Creating a Basic Web Forms Page in Visual Studio), you can use that web site and go to the next section. Otherwise, create a website and Web Forms page by following these steps.

1. Open Visual Studio or Visual Studio Express for Web.

2. In the File menu, click New Web Site.

   The New Web Site dialog box is displayed.

3. Under Installed, click Visual Basic or Visual C# and then select ASP.NET Empty Web Site.

   For this walkthrough, you create a website that does not include prebuilt pages and other resources.

4. In the Web location box, select File System, and then enter the name of the folder where you want to keep the pages for your website.

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

5. Click OK.

   Visual Studio creates a website project that includes a Web.config file.

6. In Solution Explorer, right-click the root of your Web site, and then click Add New Item.

7. Select Web Form, name the file Default.aspx, and then click Add.

In this part of the walkthrough, you will learn how to work in Design view, which provides a WYSIWYG-like view of the Web Forms page. You can add text by typing, as you would in a word-processing program. You can format text directly with formatting commands or by creating in-line styles.

Design view displays your page in a way that is similar to how it will appear in a browser, with some differences. The first difference is that in Design view, the text and elements are editable. The second difference is that to help you edit your pages, Design view displays some elements and controls that will not appear in the browser. Additionally, some elements, such as HTML tables, have a special Design view rendering that adds additional space for the editor. Overall, Design view helps you visualize your page, but it is not an exact representation of how the page will render in a browser.

1. If you are not in Design view, click Design, which is located at the lower left of the window.

   

2. At the top of the page, type ASP.NET Web Page.

   

3. Highlight the text to select it, and then on the Formatting toolbar click Heading 1.

   

4. Press ENTER after ASP.NET Web Page, and then type This page is powered by ASP.NET.

   

5. Highlight the text, then, on the Format menu, click New Style.

   

   The New Style dialog box appears.

6. Select the Apply new style to document selection option.

7. Select a font from the font-family drop-down list and then click Apply.

   The font family is applied to the selected text.

   

8. Under Category, click Block, and then select (value) from the line-height drop-down list. Enter a value for line height.

   

9. Select (value) from the letter-spacing dropdown list. Enter a value for letter spacing. Click Apply to see the values applied to the selected text.

10. Click OK.

When you are working in Design view, you might want to see tags such as div and span that do not have a visual rendering.

• On the View menu, point to Visual Aids, and make sure that ASP.NET Non-visual Controls is selected.

  The designer displays symbols for paragraphs, line breaks, and other tags that do not render text. The symbols are not all shown at the same time, but when you click a visual element, the nonvisual element that precedes it is shown.

In Design view, you can drag controls from the toolbox onto the page. You can add some elements, such as HTML tables, using a dialog box. In this section, you add some controls and a table so that you have elements to work with later in the walkthrough.

1. Put the cursor to the right of the text This page is powered by ASP.NET, and then press ENTER.

2. From the Standard group in the Toolbox, drag a TextBox control onto the page and drop it in the space you created in the preceding step.

   Note

   You can also add a control by double-clicking it.

   

3. Drag a Button control onto the page and drop it to the right of the TextBox control that you added in the preceding step.

   The TextBox and Button controls are ASP.NET web server controls, not HTML elements.

   

4. Put the cursor to the right of the Button control and then press ENTER.

5. On the Table menu, click Insert Table.

   The Insert Table dialog box appears.

   

6. Click OK.

   The Insert Table dialog box provides options for configuring the table that you are creating. However, for this walkthrough, you can use a default table layout.

   

Design view provides builders and other tools to help you create HTML elements that require property settings.

1. In the text This page is powered by ASP.NET, highlight ASP.NET to select it.

2. On the Format menu, click Convert to Hyperlink.

   

   The Hyperlink dialog box appears.

3. In the URL box, type https://www.asp.net.

   

4. Click OK.

You can change the look and behavior of the elements on the page by setting values in the Properties window.

1. Select the Button control that you added in "Adding Controls and Elements" earlier in this walkthrough.

2. In Properties window, set Text to Click Here, and ForeColor to a different color.

   

3. Place the cursor in the ASP.NET hyperlink that you created in the preceding section.

   Notice that in the Properties window, the hreef property for the a element is set to the URL that you provided for the hyperlink.

You can see the results of your editing by viewing the page in the browser.

• Right-click the page, and then click View in Browser.

  If you are prompted to save your changes, click Yes.

  Visual Studio starts IIS Express, which is a local web server that you can use to test pages without using a full IIS server.

  Note

  You can run pages in several ways. If you press CTRL+F5, Visual Studio performs the start action that is configured on the property page for Start Options. The default start option for CTRL+F5 is to run the current page; that is, the page that is currently active in Source or Design view. You can also run pages in the debugger. For more information, see Walkthrough: Debugging Web Pages in Visual Web Developer.

By default, Visual Studio opens new pages in Source view.

1. On the Tools menu, click Options

2. Make sure that the Show all settings options is selected at the bottom of the dialog box.

3. Open the HTML Designer node and then select General. Under Start Pages in, click Design view.

   

Source view lets you edit the markup of the page directly. The Source view editor gives you many features that help you as you create HTML and ASP.NET controls. You can use the toolbox in Source view just as you do in Design view to add new elements to the page.

1. Switch to Source view by clicking Source, which is located at the bottom of the window.

   The controls that you have added are created as <asp:> elements. For example, the Button control is the <asp:button> element. The property settings that you made are preserved as attribute settings in the opening <asp:button> tag.

2. From the HTML group in the Toolbox (not the Standard group), drag a Table element onto the page and place it just above the </form> tag.

The editor also helps you when you type markup manually. For example, the editor provides context-sensitive choices that finish HTML tags and attributes as you type. The editor also provides error and warning information on markup by underlining questionable markup with a wavy line. You can see the error or warning information by holding the mouse over the markup text.

1. Position the cursor above the closing </form> tag, and then type a left angle bracket (<).

   Notice that the editor offers you a list of tags that are appropriate in the current context.

   

2. Enter "a" to create an anchor tag, and then press the SPACEBAR.

   The editor displays a list of attributes that are appropriate for an anchor tag.

   Note

   The letter a (anchor element) might not appear as an option, depending on the validation target that is set for the site or the page. However, you can still create an anchor element by entering "a" without selecting an item in the drop-down list. Validation targets are discussed later in this topic.

   

3. In the list, click href, and then type an equal sign (=) and a double quotation mark (").

   The editor offers you a list of currently available pages to link to.

   

4. In the file list, double-click Default.aspx, press the spacebar, and then type a right angle bracket (>) to close the tag.

   The editor inserts a closing </a> tag.

5. Finish the anchor element by entering the text Home between the opening and closing tags.

   The element now resembles the following example:

   <a href="Default.aspx">Home</a>
   

6. Position the cursor just above the closing </form> tag, and then type <invalid>.

   The editor underlines the tag with a wavy line, indicating that the tag is not a recognized HTML tag.

7. Remove the tag that you created in the preceding step.

An important feature of the page designer is that it preserves the HTML formatting that you apply to the page. However, you can explicitly specify that the editor reformat the document.

1. Reformat the attributes for the Button control by aligning the attributes so that the declarative syntax looks like the following:

   <asp:Button
       id="Button1" 
       runat="server" 
       Font-Bold="True" 
       ForeColor="Blue" 
       Text="Click Here" />
   

   Notice that after you indent the first attribute, when you press ENTER in the tag, subsequent lines are indented to match.

2. Switch to Design view.

3. Right-click the Button control, and then click Copy.

4. Position the cursor below the Button control, right-click, and then click Paste.

   Visual Studio creates a button with the ID property set to Button2.

5. From the Standard group in the Toolbox, drag a third Button control onto the page, which creates a button named Button3.

6. Switch to Source view.

   Notice that Button2 is formatted exactly the way that you formatted Button1. On the other hand, Button3 is formatted using the default formatting for Button controls.

   Note

   For more information on how to customize the formatting of individual elements, see Walkthrough: Advanced HTML Editing in Visual Studio for Web Forms Pages.

7. Edit the document so that Button1 and Button2 are on the same line without a space between them, as shown in the following example:

   <asp:Button ID="Button1" runat="server" Font-Bold="True" 
   ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
   runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
   

   The elements can wrap, but the beginning of Button2 must immediately follow the end of Button1 (the /> character).

8. Switch to Design view.

   Notice that Button1 and Button2 are right next to each other without a space between them.

9. Switch to Source view

10. On the Edit menu, in the Advanced submenu, click Format Document.

    The document is reformatted, but Button1 and Button2 remain on the same line. If the editor separated the buttons, it would introduce a space during rendering. Therefore, the editor does not change the formatting that you have created.

You can see both the Design view and Source view windows at the same time by using Split view.

• Switch to Split view by clicking Split, which is located at the lower left of the window. Notice that the Source view window occupies the upper half of the screen, and the Design view window the lower half. Notice also that the two views are synchronized. If you double-click an item in one view to select it, the corresponding item in the other view is highlighted.

As pages become larger and more complex, it is useful to be able to find tags quickly and to reduce the clutter in the page. Visual Studio provides the following tools to help you with these tasks when you are working in Source view:

• Document Outline, which provides a complete view of the document.

• The tag navigator, which provides information about the currently selected tag and where it is in the page hierarchy.

To start, add more elements to the page so that you can examine the navigation features.

1. Switch to Design view.

2. From the HTML group in the Toolbox, drag a Table control into a cell of the table that you created in "Working in Source View," earlier in this walkthrough.

3. From the Standard group in the Toolbox, drag a Button control into the middle cell of the nested table.

With several nested elements on the page, you can see how Document Outline provides quick navigation to any tag in the page.

1. Switch to Source view.

2. On the View menu, click Document Outline.

3. In Document Outline, click Button4.

   In the editor, the <Button4> control that you added in the preceding procedure is selected.

   

The tag navigator provides information about the currently selected tag and where it is in the page hierarchy.

1. Position the cursor in the Button element.

   Notice the tag navigator at the bottom of the window, which shows the <asp:button> tag and its parent tags. The tag navigator includes the ID of the element, if any, so that you can identify which element is being displayed. The tag navigator also displays the assigned cascading style sheet, if any, that was set with the Class attribute.

   

2. In the tag navigator, click the <table> tag that is closest to the <asp:button#Button4> tag.

   The tag navigator moves to the inner <table> element and selects it.

   

3. In the tag navigator, click the <td> tag to the left of the selected <table> tag.

   The whole cell that contains the nested table is selected.

   Note

   You can click to select either the tag or its contents by using the drop-down list in the tag navigator tag. By default, clicking a tag in the tag navigator selects the tag and its contents.

You can also use the tag navigator to help you move or copy elements.

1. Using the tag navigator, select the <tr> tag that contains the Button4 control.

2. Press CTRL+C to copy the tag.

3. Use the tag navigator to move to the outer table.

4. In Source view, place the cursor between the <table> tag and the first <tr> tag.

5. Press CTRL+V to paste the copied row into the table.

6. Switch to Design view.

   Notice that the new row has been added, including a Button control.

• The Formatting toolbar applies inline styles for most settings. Bold and italic formatting is applied by using the b and i tags. Paragraph formatting is applied a block tag, such as p (for normal), pre (for formatted), and so on. Paragraph alignment is applied by using inline styles to conform with XHTML 1.1 standards.

• The designer also lets you create a style block and a link to a cascading style sheet. For more information, see Walkthrough: Creating and Modifying a CSS File.

• By default, the editor creates markup that is compatible with the XHTML5 standard. The editor converts all HTML tag names to lowercase, even if you type them in uppercase. The editor also encloses attribute (property) values in double quotation marks. For more information, see Walkthrough: Advanced HTML Editing in Visual Studio for Web Forms Pages.

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

2. In the Options dialog box, expand Text Editor, expand HTML, and then click Validation.

3. In the Target list, enter a validation type.

This walkthrough has given you an overview of the HTML capabilities of the web page editor. This includes how to create HTML in Design view and Source view, basic formatting, and navigation. To learn more about the editing facilities in Visual Studio, consult the following resources.

• To learn about the additional capabilities of the HTML editor, including custom formatting options, outlining, and HTML validation, see Walkthrough: Advanced HTML Editing in Visual Studio for Web Forms Pages.

• To learn how to work with styles in cascading style sheets, see Walkthrough: Creating and Modifying a CSS File.

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

Design View