Walkthrough: Basic HTML Editing in Visual Web Developer

The Microsoft Visual Web Developer Web development tool provides a rich HTML editing experience that lets you work in WYSIWYG mode for visualizing Web pages and also lets you work directly with HTML markup for finer control. This walkthrough introduces you to the HTML editing features of Visual Web Developer.

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.

Prerequisites

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

• A general understanding of Visual Web Developer.

  For an introduction to creating Web pages in Visual Web Developer, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

Creating the Web Site and Page

If you have already created a Web site in Visual Web Developer (for example, by completing Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and 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, click New 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.

Working in Design View

In this part of the walkthrough, you will learn how to work in Design view, which provides a WYSIWYG-like view of the 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.

To add and format static HTML in Design view

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. Click to check the Apply new style to document selection box.

7. Select a font from the font-family dropdown 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 dropdown 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.

Viewing Tag Information

When you are working in Design view, you might find it useful to see the design surface tags, such as div and span, and others that do not have a visual rendering.

To see HTML design surface tags in Design view

• 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 non-visual element that precedes it is shown.

Adding Controls and Elements

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 will add some controls and a table so that you have elements to work with later in the walkthrough.

To add controls and a table

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.

   

Creating Hyperlinks

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

To create a hyperlink

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.

Setting Properties in the Properties Window

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

To set properties by using the Properties window

1. Click 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 HRef property for the a element is set to the URL that you provided for the hyperlink.

Testing the Page

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

To start the page in the browser externally

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

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

  Visual Web Developer starts the Visual Web Developer Web server, which is a local Web server that you can use to test pages without using IIS.

  Note

  You can run pages in several ways. If you press CTRL+F5, Visual Web Developer 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.

Changing the Default View

By default, Visual Web Developer opens new pages in Source view.

To change the default page view to Design view

1. On the Tools menu, click Options

2. In the Options dialog box, click General, and then under Start Pages in, click Design view.

   

Working in Source 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.

To add elements in Source view

1. Switch to Source view by clicking Source, which is located at the lower left 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 control onto the page and place it just above the closing </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.

To edit HTML in Source view

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.

Examining HTML Formatting

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

To examine HTML formatting

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, if 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.

   This creates a button with the ID property set to of 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 Web Developer.

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 end of Button1 (the /> characters) must be followed immediately by the beginning of Button2 (that is, <asp:Button ID=).

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 were to separate the buttons, it would introduce a space during rendering. Therefore, the editor does not change the formatting that you have created.

Working in Split View

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

To view a page in Split view

• Switch to Split view by clicking Split, which is located at the lower left of the window.

Navigating Between Elements

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 Web Developer 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 will be able to examine navigation features.

To add elements

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.

To navigate using Document Outline

1. Switch to Source view.

2. On the View menu, in the Other Windows submenu, 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.

To navigate using tag navigator

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.

To move or copy elements using the tag navigator

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.

Formatting Text

• 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 XHTML 1.1 standard and 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 Web Developer.

To change the default markup validation

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

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

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

Next Steps

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. You might want to learn more about the editing facilities in Visual Web Developer. For example, you might want to do the following:

• Learn about the additional capabilities of the HTML editor, including custom formatting options, outlining, and HTML validation. For more information, see Walkthrough: Advanced HTML Editing in Visual Web Developer.

• Learn how to work with cascading style sheet styles. For more information, see Walkthrough: Creating and Modifying a CSS File.

See Also

Tasks

Walkthrough: Advanced HTML Editing in Visual Web Developer

Concepts

Design View

Reference

Source View