Close the Default.aspx page. To do this, right-click the tab containing the file name and select Close.

In Solution Explorer, right-click the Web site (for example, C:\BasicWebSite), and then click Add New Item.

Under Visual Studio installed templates, click Web Form. The following screen shot shows the Add New Item dialog box.

In the Name box, type FirstWebPage.

In the Language list, choose the programming language you prefer to use (Visual Basic, C#, or J#). When you created the Web site, you specified a default language. However, each time you create a new page or component for your Web site, you can change the language from the default. You can use different programming languages in the same Web site.

Clear the Place code in separate file check box.

In this walkthrough, you are creating a single-file page with the code and HTML in the same page. The code for ASP.NET pages can be located either in the page or in a separate class file. To learn more about keeping the code in a separate file, see Walkthrough: Creating a Basic Web Page with Code Separation in Visual Web Developer.

Click Add.

Visual Web Developer creates the new page and opens it.

At the bottom of the document window, click the Design tab to switch to Design view.

Design view displays the page that you are working on in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank except for a dashed line that outlines a rectangle. This rectangle represents a div element on the page.

Click inside the rectangle that is outlined by a dashed line.

Type Welcome to Visual Web Developer and press Enter twice.

The following screen shot shows the text you typed in Design view.

Switch to Source view.

You can see the HTML that you created by typing in Design view, as shown in the following screen shot.

In Solution Explorer, right-click FirstPage.aspx and select Set as Start Page.

Press CTRL+F5 to run the page.

Visual Web Developer starts the ASP.NET Development Server. An icon appears on the toolbar to indicate that the Visual Web Developer Web server is running, as shown in the following screen shot.

The page is displayed in the browser. Although the page you created has an extension of .aspx, it currently runs like any HTML page.

To display a page in the browser you can also right-click the page in Solution Explorer and select View in Browser.

Note:
If the browser displays a 502 error or an error indicating that the page cannot be displayed, you might need to configure your browser to bypass proxy servers for local requests. For details, see How to: Bypass a Proxy Server for Local Web Requests.

Close the browser.

Select the Button control, and then in the Properties window, set Text to Display Name, as shown in the following screen shot.

Switch to Source view.

Source view displays the HTML for the page, including the elements that Visual Web Developer has created for the server controls. Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute runat="server".

Control properties are declared as attributes. For example, when you set the Text property for the Button control, in step 1, you were actually setting the Text attribute in the control's markup.

Note that all the controls are inside a <form> element, which also has the attribute runat="server". The runat="server" attribute and the asp: prefix for control tags mark the controls so that they are processed by ASP.NET on the server when the page runs. Code outside of <form runat="server"> and <script runat="server"> elements is sent unchanged to the browser, which is why the ASP.NET code must be inside an element whose opening tag contains the runat="server" attribute.

Put the insertion point after asp:Label in the <asp:Label> tag, and then press SPACEBAR.

A drop-down list appears that displays the list of properties you can set for a Label control. This feature, referred to as IntelliSense, helps you in Source view with the syntax of server controls, HTML elements, and other items on the page. The following screen shot shows the IntelliSense drop-down list for the Label control.

Select ForeColor and then type an equal sign (=). IntelliSense displays a list of colors.

Note:
You can display an IntelliSense drop-down list at any time by pressing CTRL+J.

Select a color for the Label control's text. Make sure you select a color that is dark enough to read against a white background.

The ForeColor attribute is completed with the color that you have selected.

Switch to Design view.

Double-click the Button control.

Visual Web Developer switches to Source view and creates a skeleton event handler for the Button control's default event, the Click event.

Note:
Double-clicking a control in Design view is just one of several ways you can create event handlers.

Inside the handler, type the following:

Label1.

When you type the period after Label, Visual Web Developer displays a list of available members for the Label control, as shown in the following screen shot.

Finish the Click event handler for the button so that it reads as shown in the following code example.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

Scroll down to the <asp:Button> element. Note that the <asp:Button> element now has the attribute OnClick="Button1_Click". This attribute binds the button's Click event to the handler method you coded in step 4.

Event handler methods can have any name; the name you see is the default name created by Visual Web Developer. The important point is that the name used for the OnClick attribute must match the name of a method in the page.

Note:
If you are using Visual Basic with code separation, Visual Web Developer does not add an explicit OnClick attribute. Instead, the event is bound to the handler method using a Handles keyword on the handler declaration itself.

Press CTRL+F5 to run the page in the browser.

The page again runs using the ASP.NET Development Server.

Enter a name into the text box and click the button.

The name you entered is displayed in the Label control. Note that when you click the button, the page is posted to the Web server. ASP.NET then recreates the page, runs your code (in this case, the Button control's Click event handler runs), and then sends the new page to the browser. If you watch the status bar in the browser, you can see that the page is making a round trip to the Web server each time you click the button.

In the browser, view the source of the page you are running.

In the page source code, you see only ordinary HTML; you do not see the <asp:> elements that you were working with in Source view. When the page runs, ASP.NET processes the server controls and renders HTML elements to the page that perform the functions that represent the control. For example, the <asp:Button> control is rendered as the HTML element <input type="submit">.

Close the browser.

In Design view, double-click the Calendar control.

A new event handler is created in Source view.

Finish the SelectionChanged event handler with the following highlighted code.

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToLongDateString()
End Sub

protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToLongDateString();
}

Press CTRL+F5 to run the page in the browser.

Click a date in the calendar.

The date you clicked is displayed in the Label control.

In the browser, view the source code for the page.

Note that the Calendar control has been rendered to the page as a table, with each day as a <td> element containing an <a> element.

Close the browser.