Walkthrough: Basic HTML Editing in Visual Web Developer

Walkthrough: Basic HTML Editing in ...

Switch on low bandwidth view

Collapse All

Language Filter

This page is specific to

Microsoft Visual Studio 2005/.NET Framework 2.0

Other versions are also available for the following:

Visual Web Developer

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

In this walkthrough, you will work with a Web site and a single ASP.NET Web page that is similar to the one that is created in Walkthrough: Creating a Basic Web Page in Visual Web Developer. If you have completed that walkthrough, you can use that Web site and page.

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

Open Visual Web Developer.
On the File menu, click New Web Site.

The New Web Site dialog box appears.
Under Visual Studio installed templates, click ASP.NET Web Site.
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.
In the Language list, click the programming language that you prefer to work in.
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

If you are not in Design view, click Design, which is located at the lower left of the window.
At the top of the page, type ASP.NET Web Page.
Highlight the text to format to select it, and then on the Format toolbar, in the left-most list, click Heading 1.
Position the insertion pointer below ASP.NET Web Page, and then type This page is powered by ASP.NET.
Right-click This page is powered by ASP.NET., and then click Style.

The Style Builder dialog box appears.
Click Font, and then in Family, click the ellipsis (…) button.

The Font Picker dialog box appears.
Under Installed fonts, click Verdana, and then click the add (>>) button.
Click OK to close the Font Picker dialog box.
Click Text, and then in the Horizontal list, click Centered.
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, click Details.

The designer displays symbols for paragraphs, line breaks, and other tags that do not render text.

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

Position the insertion pointer to the right of the closing paragraph mark for This page is powered by ASP.NET., and then press ENTER.
From the Standard group in the Toolbox, drag a TextBox control onto the page.

Note

You can also add a control by double-clicking it.
Drag a Button control onto the page.

The TextBox and Button controls are ASP.NET Web server controls, not HTML elements.
On the Layout menu, click Insert Table.

The Insert Table dialog box appears.
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.

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

Creating Hyperlinks

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

To create a hyperlink

In the text This page is powered by ASP.NET., highlight ASP.NET to select it.
On the Format menu, click Convert to Hyperlink.

The Hyperlink dialog box appears.
In the URL box, type http://www.asp.net.
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 Properties.

To set properties by using the Properties window

Click the Button control that you added in "Adding Controls and Elements," earlier in this walkthrough.
In Properties, set Text to Click Here, ForeColor to a different color, and Bold to true.
Place the insertion point in the ASP.NET hyperlink that you created in the preceding section.

Notice that in Properties, 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.

Changing the Default View

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

To change the default page view to Design view

On the Tools menu, click Options
In the Options dialog box, click HTML Designer, and then under Start Pages in, click Design view.

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.

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.

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

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 <asp:button> tag.
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 finishing 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. The error or warning information is available by positioning the mouse over the markup text.

To edit HTML in Source view

Position the insertion point 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.
Highlight a to select it, and then press the SPACEBAR.

The editor displays a list of attributes that are appropriate for an anchor tag.
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 and an option to open the Homepicker dialog box.
In 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.
Finish the anchor element so that it links to the Default.aspx page using the link text Home and reads as follows:
```
<a href="Default.aspx">Home</a>
```
Position the insertion point in the a tag.

Notice that Properties displays the attributes for the tag.
In Properties, for the HRef property, click the ellipsis (…) button.

The Select Project Item dialog box appears.

Now, you can select a page in the current Web site as the target page. If you do not have other pages in the Web site to choose from, close the Select Project Item dialog box and type a favorite URL into the Href box of the Properties window.
Position the insertion point 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.
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

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.
Switch to Design view.
Right-click the new Button control, and then click Copy.
Position the insertion point below the new Button control, right-click, and then click Paste.

This creates a button with the ID of Button2.
From the Standard group in the Toolbox, drag a third Button control onto the page, which creates <Button3>.
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 asp:button elements.

Note

For more information on how to customize the formatting of individual elements, see Walkthrough: Advanced HTML Editing in Visual Web Developer.
Edit the document so that <Button1> and <Button2> are on the same line without a space between them:
```
<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> (that is, />) must be followed immediately by the beginning of <Button2> (that is <asp:Button ID=).
Switch to Design view.

Notice that <Button1> and <Button2> are right next to each other without a space between them.
Switch to Source view
On the Edit menu, point to Advanced, and then 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.

Note
For more information on how to customize the formatting of individual elements, see Walkthrough: Advanced HTML Editing in Visual Web Developer.

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

Switch to Design view.
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.
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 with Document Outline

Switch to Source view.
On the View menu, point to Other Windows, and then click Document Outline.
In Document Outline, click Button4.

In the editor, the <Button4> control that you added in the preceding procedure is selected.
Right-click the <table> tag of the outer table, and then click Synchronize Document Outline.

The selection in Document Outline is moved to the outer table tag.

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

To navigate with tag navigator

Position the insertion point in the <asp:button> tag.

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.
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.
In the tag navigator, click the <td> tag to the left of the selected <table>.

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.

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

Using the tag navigator, select the <tr> tag that contains <Button4>.
Press CTRL+C to copy the tag.
Use the tag navigator to move to the outer table.
In Source view, place the insertion pointer between the <table> tag and the first <tr> tag.
Press CTRL+V to paste the copied row into the table.
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: Working with Cascading Style Sheet Styles in Visual Web Developer.
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 quotation marks. For more information, see Walkthrough: Advanced HTML Editing in Visual Web Developer.

To change the default markup validation

In Source view, right-click the page, and then click Formatting and Validation.
In the Options dialog box, expand Text Editor, expand HTML, and then click Validation.
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: Working with Cascading Style Sheet Styles in Visual Web Developer .